{"id":12645,"library":"vuetify","title":"Vuetify Component Framework","description":"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.","status":"active","version":"4.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/vuetifyjs/vuetify","tags":["javascript","vuetify","ui framework","component framework","ui library","component library","material components","vue framework","typescript"],"install":[{"cmd":"npm install vuetify","lang":"bash","label":"npm"},{"cmd":"yarn add vuetify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vuetify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for a Vue.js component framework.","package":"vue","optional":false},{"reason":"Recommended for type-safe development, peer dependency since v4.","package":"typescript","optional":true},{"reason":"Required for optimal tree-shaking and component resolution when using Vite.","package":"vite-plugin-vuetify","optional":true},{"reason":"Required for optimal tree-shaking and component resolution when using Webpack.","package":"webpack-plugin-vuetify","optional":true}],"imports":[{"note":"Vuetify v3+ is ESM-first. CommonJS `require` is not the standard way to import.","wrong":"const { createVuetify } = require('vuetify');","symbol":"createVuetify","correct":"import { createVuetify } from 'vuetify';"},{"note":"Styles are imported directly from `vuetify/styles`. Old `dist` paths are deprecated since v3 and removed in v4.","wrong":"import 'vuetify/dist/vuetify.min.css';","symbol":"Vuetify Styles","correct":"import 'vuetify/styles';"},{"note":"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.","wrong":"import VBtn from 'vuetify/components/VBtn';","symbol":"VBtn (individual component)","correct":"import { VBtn } from 'vuetify/components';"},{"note":"Most composables are directly exported from the main 'vuetify' package, simplifying imports.","wrong":"import { useDisplay } from 'vuetify/composables';","symbol":"useDisplay (composable)","correct":"import { useDisplay } from 'vuetify';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport App from './App.vue';\nimport 'vuetify/styles'; // Essential: import global Vuetify styles\nimport { createVuetify } from 'vuetify';\nimport * as components from 'vuetify/components'; // Globally import all components for convenience\nimport * as directives from 'vuetify/directives'; // Globally import all directives\n\nconst vuetify = createVuetify({\n  components,\n  directives,\n  theme: { defaultTheme: 'light' }, // Example: set a light theme\n});\n\ncreateApp(App).use(vuetify).mount('#app');\n\n// Then, in your App.vue or any component, you can use Vuetify components:\n// <template>\n//   <v-app>\n//     <v-main>\n//       <v-container>\n//         <v-btn color=\"primary\">Hello Vuetify</v-btn>\n//       </v-container>\n//     </v-main>\n//   </v-app>\n// </template>","lang":"typescript","description":"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`."},"warnings":[{"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`.","message":"Vuetify 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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=4.0.5"},{"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`.","message":"Forgetting 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.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"Always include `import 'vuetify/styles';` at the very beginning of your `main.ts` or `main.js` file, before `createApp`.","message":"Not importing the global Vuetify styles (`import 'vuetify/styles';`) will result in unstyled components, appearing as raw HTML elements.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you call `app.use(vuetify)` after `createApp` and before `mount`, where `vuetify` is the result of `createVuetify()`.","cause":"The Vuetify plugin was not registered with the Vue application instance.","error":"Vuetify is not installed correctly or 'vuetify' instance not found"},{"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.","cause":"Vuetify's core CSS styles have not been imported or are being overridden.","error":"Components appear unstyled or look incorrect, but the browser console has no errors."},{"fix":"Update your imports to use `vuetify/components` instead of `vuetify/lib/components`. For example, `import { VBtn } from 'vuetify/components';`.","cause":"This error indicates using an outdated import path (common in v2) that is no longer valid in Vuetify v3 and v4.","error":"Module not found: Error: Can't resolve 'vuetify/lib/components' in ..."},{"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.","cause":"The Vuetify components are not properly registered or are not being tree-shaken correctly by your bundler.","error":"Vue Compiler Error: Failed to resolve component: VBtn (or any Vuetify component)"}],"ecosystem":"npm"}