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.tsimport { 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");
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"; ',
},
},
},
});
@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);
});
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";',
},
},
},
},
});
@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;
}
}
// ...