Vuetify Component Framework

Common errors

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

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

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

  cause 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)

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

Warnings

• breaking 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.
  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`.
• gotcha 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.
  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.
• gotcha 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.
  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`.
• gotcha Not 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`.

Install

• npm install vuetify npm
• yarn add vuetify yarn
• pnpm add vuetify pnpm

Imports

• createVuetify
  wrong:

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

  correct:

  import { createVuetify } from 'vuetify';

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

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

  correct:

  import 'vuetify/styles';

  Styles are imported directly from `vuetify/styles`. Old `dist` paths are deprecated since v3 and removed in v4.
• VBtn (individual component)
  wrong:

  import VBtn from 'vuetify/components/VBtn';

  correct:

  import { VBtn } from 'vuetify/components';

  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)
  wrong:

  import { useDisplay } from 'vuetify/composables';

  correct:

  import { useDisplay } from 'vuetify';

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

Quickstart

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>