A comprehensive collection of reusable Vue.js UI components to streamline your development process. It contains frequently used components, adaptable to your needs. You can use each of the proposed components or just use the one you need.
You can read the full documentation here.
You can also browse and maintain local markdown docs in this repository:
Para probar cambios de componentes y tema en runtime:
npm run playground:devBuild y preview del playground:
npm run playground:build
npm run playground:preview- Get Started
- Forms & Inputs
- Containment
- Layout
npm install drocketimport { EButton, EForm, ECheckbox, EDIalog, ESelect,...rest } from "drocket";// 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";";
`,
},
},
},
});// src/style.scss
@import "drocket/framework.scss";// 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";',
},
},
},
},
});// assets/styles/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,
);
// This is mandatory
@import "drocket/setting.scss";We welcome and encourage contributions from the community! If you'd like to contribute to the Vue UI Components library, here's how you can get started:
Fork the repository on GitHub and clone it to your local machine.
git clone https://github.com/your-username/drocket-contributions.gitCreate a new branch for your contributions.
git checkout -b feature-branchMake your changes to the code using your preferred code editor.
Stage and commit your changes.
git add .
git commit -m "Add feature or fix issue"Push your changes to your forked repository.
git push origin feature-branchVisit your forked repository on GitHub, and open a pull request to the main repository.
If you encounter any issues or have suggestions for improvements, please report them on our Issues page. Before creating a new issue, check if a similar one already exists.
We appreciate your contributions and feedback. Together, let's make the Drocket even better!