Introduction - Drocket

Drocket is components library built on top of Vue. It offers a collection of pre-designed UI components and styles that you can easily integrate into your web applications. Install Drocket in your Vue application or Nuxt Application following step bellow.

Installation

To get started with Drocket, simply paste the following code into your terminal:

npm install drocket

Vue App

Setting Up Drocket in Vue Application

//src/main.ts
import { createApp } from "vue"; import "drocket/styles.css"; import App from "./App.vue"; import { Drocket } from "drocket"; const app = createApp(App); // this line auto imports all components and directives app.use(Drocket); app.mount("#app");
// vite.config.ts
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], css: { preprocessorOptions: { scss: { // This is the path to your variables additionalData: ' @import "assets/styles/variables.scss"; ', }, }, }, });
// style.scss
@import "drocket/setting.scss"

Nuxt App

Setting Up Drocket in Nuxt Application

// plugins/drocket.ts
import { Drocket } from "drocket"; export default defineNuxtPlugin((nuxtApp) => { // this line auto imports all components and directives nuxtApp.vueApp.use(Drocket); });
// nuxt.config.ts
export default defineNuxtConfig({ css: [ "drocket/styles.css", "drocket/framework.scss", ], vite: { css: { preprocessorOptions: { scss: { // This is the path to your variables additionalData: '@import "assets/styles/variables.scss";', }, }, }, }, });
// sass/variables.scss
@import "drocket/setting.scss"

Sass variables example file

This file overrides the default library style settings, each of the colors defined in it can be passed as a property to components declared in the library and also generate helper classes.

/sass/variables.scss
// Globals $border-radius-root: 4px; $root-font-size: 2rem; // Colors $colors: ( "primary": #f19933, "secondary": #2c373c, "white": white, "black": black, "disabled": rgba(0, 0, 0, 0.38), "success": #66bb6a, "red": #f44336, "error": #f44336, ); $contrast-colors: ( "white": black, ) !default; // This is mandatory @import "drocket/setting.scss";

Generated classes

.primary { background-color: #f19933; &--text { color: #f19933; } } .secondary { background-color: #2c373c; &--text { color: #2c373c; } } // ...