Vuetify 3 – Setup

Vuetify 3 is the Vue 3 version of Vuetify. It is a Material Design UI library; it does not target Material 3 / Material You — it implements the older Material spec.

Install

npm install vuetify@^3
npm install -D sass         # required by Vuetify

If you use icons (you almost always do):

npm install @mdi/font

Plugin

// src/plugins/vuetify.js
import 'vuetify/styles'
import '@mdi/font/css/materialdesignicons.css'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
  },
  theme: {
    defaultTheme: 'kydLight',
    themes: {
      kydLight: {
        dark: false,
        colors: {
          primary: '#1976d2',
          secondary: '#424242',
          accent: '#82b1ff',
          error:   '#ff5252',
          info:    '#2196f3',
          success: '#4caf50',
          warning: '#fb8c00',
        },
      },
    },
  },
})

Mount

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

createApp(App).use(vuetify).mount('#app')

Tree-shaking (production)

Importing everything is fine for development. For smaller bundles:

import { createVuetify } from 'vuetify'
import { VBtn, VTextField, VDataTable } from 'vuetify/components'

export default createVuetify({
  components: { VBtn, VTextField, VDataTable },
})

Or use the vite-plugin-vuetify plugin which auto-imports only the components you actually use.

App layout root

Every Vuetify app is wrapped in <v-app>:

<template>
  <v-app>
    <v-app-bar />
    <v-main>
      <router-view />
    </v-main>
  </v-app>
</template>

<v-app> provides theme variables, layout context, and the overlay container used by <v-dialog> / <v-menu> / <v-snackbar>. Components mounted outside <v-app> will not pick up theme colors.