{"id":12643,"library":"vuestic-ui","title":"Vuestic UI Framework","description":"Vuestic UI is a comprehensive, open-source Vue 3 UI framework developed by Epicmax, currently in its 1.x stable release series, with version 1.10.3 being recent. It provides over 60 customizable, production-ready components designed for rapid development of responsive, accessible, and high-quality web applications. Key differentiators include robust global and local configuration options for deep customization, built-in i18n integration, and full TypeScript support, ensuring strong type inference and developer-friendly IntelliSense. The library maintains a steady release cadence with frequent updates focusing on features, fixes, and performance enhancements. It leverages modern CSS practices like BEM naming conventions to minimize style conflicts, allowing seamless integration with other libraries like Tailwind CSS.","status":"active","version":"1.10.3","language":"javascript","source_language":"en","source_url":"https://github.com/epicmaxco/vuestic-ui","tags":["javascript","vuestic","vuejs","vue","vue3","ui","vue framework","ui framework","typescript"],"install":[{"cmd":"npm install vuestic-ui","lang":"bash","label":"npm"},{"cmd":"yarn add vuestic-ui","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuestic-ui","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Vue.js 3 is the core runtime dependency for Vuestic UI components.","package":"vue","optional":false}],"imports":[{"note":"The `createVuestic` function is the factory for the Vuestic UI plugin, used to globally register components, directives, and configure the framework. Always import the main CSS file separately.","wrong":"import VuesticUI from 'vuestic-ui'; // VuesticUI is not a default export\napp.use(VuesticUI);","symbol":"createVuestic","correct":"import { createApp } from 'vue';\nimport { createVuestic } from 'vuestic-ui';\nimport 'vuestic-ui/css';\n\nconst app = createApp(App);\napp.use(createVuestic({ /* global config */ }));"},{"note":"Individual components are named exports. For tree-shaking, it's recommended to import components directly rather than relying solely on global registration via `createVuestic` if fine-grained control is needed.","symbol":"VaButton","correct":"import { VaButton } from 'vuestic-ui';"},{"note":"Composables like `useColors` are also named exports directly from the main package and provide reactive utilities. Ensure they are called within Vue's `setup` context or a component lifecycle hook.","wrong":"import { useColors } from 'vuestic-ui/dist/composables/useColors'; // Correct path, but direct import is cleaner","symbol":"useColors","correct":"import { useColors } from 'vuestic-ui';\n\nconst { getColor, getTextColor } = useColors();"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport { createVuestic, VaButton } from 'vuestic-ui';\nimport 'vuestic-ui/css';\n\nconst app = createApp(App);\n\n// Install Vuestic UI plugin with optional global configuration\napp.use(createVuestic({\n  colors: {\n    // Define custom color palette\n    primary: '#4ae387',\n    success: '#40e583',\n    danger: '#e34a4a'\n  },\n  components: {\n    VaButton: {\n      // Globally configure VaButton props\n      size: 'medium',\n      preset: 'primary'\n    }\n  }\n}));\n\napp.mount('#app');\n\n// App.vue example:\n// <template>\n//   <div>\n//     <h1>Welcome to Vuestic UI</h1>\n//     <VaButton>Click Me</VaButton>\n//     <VaButton color=\"success\">Success Button</VaButton>\n//   </div>\n// </template>\n// <script setup>\n//   // No explicit import needed in <script setup> if globally registered\n// </script>\n","lang":"typescript","description":"Demonstrates how to install Vuestic UI, register it as a Vue plugin with global configuration, and use a basic component like `VaButton` in a Vue 3 application."},"warnings":[{"fix":"Ensure `app.use(createVuestic())` is called in your main application entry file (e.g., `main.ts` or `main.js`). After updating, clear your build cache (e.g., `node_modules/.vite/deps/` for Vite or `node_modules/.nuxt/` for Nuxt) and reinstall dependencies.","message":"The 'Vuestic cache plugin is not registered!' error often occurs due to incorrect Vuestic UI plugin installation, particularly when using a custom build setup or after package updates. It can also stem from import issues where the plugin isn't properly initialized before components are used.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Instead of `import 'vuestic-ui/css';`, use specific style imports: `import 'vuestic-ui/styles/essential.css';` and `import 'vuestic-ui/styles/typography.css';`. This ensures only the necessary Vuestic styles are included, allowing Tailwind to manage the base resets.","message":"When integrating with Tailwind CSS, importing the default `vuestic-ui/css` can lead to style conflicts because Vuestic's reset styles might clash with Tailwind's.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"If using Vuestic UI as Web Components, regularly check the official documentation for updates to the `registerVuesticWebComponents` API. Consider alternative integration methods for critical applications until the feature stabilizes.","message":"The Web Components build feature in Vuestic UI is currently in 'test mode'. This means its API might change in future releases, and unexpected bugs could occur. Production use should be approached with caution.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Use global configuration for broad theme and default prop settings. For more localized adjustments, utilize the `VaConfig` component or directly pass props to individual components, as these have higher priority and offer scoped control.","message":"Globally overriding component props or styles via `createVuestic` can have unintended, widespread effects across your application. While powerful for consistent theming, it can make debugging specific component behavior challenging if not carefully managed.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `app.use(createVuestic())` is in `main.ts` (or `main.js`). Clear `node_modules/.vite/deps/` (for Vite) or `node_modules/.nuxt/` (for Nuxt) and `npm install` again.","cause":"The Vuestic UI plugin was not correctly installed or initialized in the application's entry file, or a build cache issue exists.","error":"Error: Vuestic cache plugin is not registered!"},{"fix":"For Tailwind projects, import `vuestic-ui/styles/essential.css` and `vuestic-ui/styles/typography.css` instead of `vuestic-ui/css`. For other conflicts, inspect generated CSS using developer tools and override specific Vuestic CSS variables (prefixed with `--va-`) for targeted adjustments.","cause":"Incorrect CSS import path, especially when mixing Vuestic UI with other frameworks like Tailwind, or general CSS specificity issues.","error":"Component styles are not applying or conflict with existing CSS."},{"fix":"Ensure Vuestic UI composables are called within the `setup` block of a Vue component (or `<script setup>`) or a function invoked by a lifecycle hook. They rely on Vue's component instance context to function correctly.","cause":"A Vuestic UI composable (e.g., `useColors`, `useModal`) is being called outside of a Vue component's `setup` function or a valid lifecycle hook, leading to an invalid reactive context.","error":"Cannot access 'composableName' before initialization (e.g., 'Cannot access 'useColors' before initialization')"}],"ecosystem":"npm"}