vuetify

library4.0.5jsnpmunverified

Vuetify is a comprehensive UI component framework for Vue.js, meticulously implementing Google's Material Design specification. Currently on its v4.0.5 release, with a parallel v3.x maintenance branch (latest v3.12.5), it provides over 80 reusable components that enable developers to build rich, responsive, and visually consistent web applications. The project maintains an active release cadence, frequently delivering bug fixes and new features across both major versions. A key differentiator is its deep integration with the Vue ecosystem, offering extensive customization options through SASS variables, theming, and a robust plugin architecture. However, the project has recently faced significant funding challenges, urging community support to continue compensating its core contributors, which may impact its long-term stability and development pace if not addressed. It is primarily used with Vue 3 and TypeScript.

web-framework

npm install vuetify

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUETIFY

vuetify

web-frameworkjavascriptv4.0.5

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.

createVuetify

✓ import { createVuetify } from 'vuetify';

✗ const { createVuetify } = require('vuetify');

Vuetify v3+ is ESM-first. CommonJS `require` is not the standard way to import.

Vuetify Styles

✓ import 'vuetify/styles';

✗ import 'vuetify/dist/vuetify.min.css';

Styles are imported directly from `vuetify/styles`. Old `dist` paths are deprecated since v3 and removed in v4.

VBtn (individual component)

✓ import { VBtn } from 'vuetify/components';

✗ import VBtn from 'vuetify/components/VBtn';

Components are typically imported as named exports from `vuetify/components` for tree-shaking. Global registration via `* as components` is also common but less tree-shakeable.

useDisplay (composable)

✓ import { useDisplay } from 'vuetify';

✗ import { useDisplay } from 'vuetify/composables';

Most composables are directly exported from the main 'vuetify' package, simplifying imports.

Demonstrates the minimal setup for a Vuetify v4 application in a Vue 3 project, including styles, global component registration, and basic theme configuration in `main.ts`.

import { createApp } from 'vue'; import App from './App.vue'; import 'vuetify/styles'; // Essential: import global Vuetify styles import { createVuetify } from 'vuetify'; import * as components from 'vuetify/components'; // Globally import all components for convenience import * as directives from 'vuetify/directives'; // Globally import all directives const vuetify = createVuetify({ components, directives, theme: { defaultTheme: 'light' }, // Example: set a light theme }); createApp(App).use(vuetify).mount('#app'); // Then, in your App.vue or any component, you can use Vuetify components: // <template> // <v-app> // <v-main> // <v-container> // <v-btn color="primary">Hello Vuetify</v-btn> // </v-container> // </v-main> // </v-app> // </template>

Debug

Known issues

breakingVuetify v4.0.0 introduces significant breaking changes from v3, including internal architecture, tree-shaking improvements, and removal of deprecated paths. Direct upgrades without consulting the migration guide are likely to fail.

fix

Refer to the official Vuetify v4 migration guide for detailed instructions. Key changes include updated import paths for components and styles, and potentially different configuration options for plugins like `vite-plugin-vuetify` or `webpack-plugin-vuetify`.

affects: >=4.0.0

gotchaThe Vuetify project has recently announced critical funding exhaustion and is unable to compensate contributors. This could impact the project's long-term stability, development pace, and bug fix timelines.

fix

Consider sponsoring the project via Open Collective or GitHub Sponsors if your business relies on Vuetify. Monitor official announcements for updates on the project's financial status.

affects: >=4.0.5

gotchaForgetting to install and configure the bundler-specific plugin (e.g., `vite-plugin-vuetify` or `webpack-plugin-vuetify`) can lead to unstyled components, poor tree-shaking, or incorrect build outputs, especially in v3+ and v4.

fix

Ensure you have the correct plugin for your bundler installed (`npm i -D vite-plugin-vuetify` or `npm i -D webpack-plugin-vuetify`) and configured in your `vite.config.js` or `webpack.config.js`.

affects: >=3.0.0

gotchaNot importing the global Vuetify styles (`import 'vuetify/styles';`) will result in unstyled components, appearing as raw HTML elements.

fix

Always include `import 'vuetify/styles';` at the very beginning of your `main.ts` or `main.js` file, before `createApp`.

affects: >=3.0.0

Errors

Common errors & fixes

Vuetify is not installed correctly or 'vuetify' instance not found

The Vuetify plugin was not registered with the Vue application instance.

fix

Ensure you call `app.use(vuetify)` after `createApp` and before `mount`, where `vuetify` is the result of `createVuetify()`.

Components appear unstyled or look incorrect, but the browser console has no errors.

Vuetify's core CSS styles have not been imported or are being overridden.

fix

Add `import 'vuetify/styles';` to your application's entry file (e.g., `main.ts` or `main.js`). Also, verify no conflicting global styles are being applied.

Module not found: Error: Can't resolve 'vuetify/lib/components' in ...

This error indicates using an outdated import path (common in v2) that is no longer valid in Vuetify v3 and v4.

fix

Update your imports to use `vuetify/components` instead of `vuetify/lib/components`. For example, `import { VBtn } from 'vuetify/components';`.

Vue Compiler Error: Failed to resolve component: VBtn (or any Vuetify component)

The Vuetify components are not properly registered or are not being tree-shaken correctly by your bundler.

fix

Ensure `vuetify` is configured correctly with `app.use(vuetify)` and that you are either globally importing `* as components from 'vuetify/components'` or explicitly importing each component needed. Also, verify your bundler's Vuetify plugin is correctly set up.

Upgrade

Version history

4.0.5latest on npm

Audit

Dependencies

vuerequiredCore dependency for a Vue.js component framework.

typescriptoptionalRecommended for type-safe development, peer dependency since v4.

vite-plugin-vuetifyoptionalRequired for optimal tree-shaking and component resolution when using Vite.

webpack-plugin-vuetifyoptionalRequired for optimal tree-shaking and component resolution when using Webpack.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuetifyjs/vuetify ↗

packagehttps://www.npmjs.com/package/vuetify ↗

homepagehttps://vuetifyjs.com ↗