vuestic-ui

library1.10.3jsnpmunverified

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.

web-framework

npm install vuestic-ui

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUESTIC-UI

vuestic-ui

web-frameworkjavascriptv1.10.3

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

createVuestic

✓ import { createApp } from 'vue'; import { createVuestic } from 'vuestic-ui'; import 'vuestic-ui/css'; const app = createApp(App); app.use(createVuestic({ /* global config */ }));

✗ import VuesticUI from 'vuestic-ui'; // VuesticUI is not a default export app.use(VuesticUI);

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.

VaButton

✓ import { VaButton } from 'vuestic-ui';

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.

useColors

✓ import { useColors } from 'vuestic-ui'; const { getColor, getTextColor } = useColors();

✗ import { useColors } from 'vuestic-ui/dist/composables/useColors'; // Correct path, but direct import is cleaner

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.

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.

import { createApp } from 'vue'; import App from './App.vue'; import { createVuestic, VaButton } from 'vuestic-ui'; import 'vuestic-ui/css'; const app = createApp(App); // Install Vuestic UI plugin with optional global configuration app.use(createVuestic({ colors: { // Define custom color palette primary: '#4ae387', success: '#40e583', danger: '#e34a4a' }, components: { VaButton: { // Globally configure VaButton props size: 'medium', preset: 'primary' } } })); app.mount('#app'); // App.vue example: // <template> // <div> // <h1>Welcome to Vuestic UI</h1> // <VaButton>Click Me</VaButton> // <VaButton color="success">Success Button</VaButton> // </div> // </template> // <script setup> // // No explicit import needed in <script setup> if globally registered // </script>

Debug

Known issues

gotchaThe '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.

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.

affects: >=1.0.0

gotchaWhen 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.

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.

affects: >=1.0.0

deprecatedThe 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.

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.

affects: >=1.0.0

gotchaGlobally 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

Error: Vuestic cache plugin is not registered!

The Vuestic UI plugin was not correctly installed or initialized in the application's entry file, or a build cache issue exists.

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.

Component styles are not applying or conflict with existing CSS.

Incorrect CSS import path, especially when mixing Vuestic UI with other frameworks like Tailwind, or general CSS specificity issues.

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.

Cannot access 'composableName' before initialization (e.g., 'Cannot access 'useColors' before initialization')

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.

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.

Upgrade

Version history

1.10.3latest on npm

Audit

Dependencies

vuerequiredVue.js 3 is the core runtime dependency for Vuestic UI components.

Agent activity

10 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/epicmaxco/vuestic-ui ↗

packagehttps://www.npmjs.com/package/vuestic-ui ↗

homepagehttps://vuestic.dev ↗