Setting up Vuetify 3 in Nuxt 3 can be a bit confusing task because there is no official setup guide to date. This tutorial looks at two simple approaches to adding Vuetify 3 to your Nuxt 3 application.

Basic Setup

1. Create Nuxt 3 Application

npx nuxi init vuetify3-nuxt3
cd vuetify3-nuxt3
yarn install

2. Add Vuetify 3

yarn add -D vuetify

3. Add mdi + font (optional)

yarn add -D @mdi/font

4. Create & Configure Nuxt Vuetify plugin

mkdir -p plugins
touch ./plugins/vuetify.ts

• Paste the following code inside the plugins/vuetify.ts file

// Vuetify
import '@mdi/font/css/materialdesignicons.css' // (optional)
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true, // Detect if SSR is used in order to properly render the application.
    components,
    directives,
  })
  nuxtApp.vueApp.use(vuetify)
})

5. Configure nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
})

6. Run Your Nuxt Application

yarn dev

Caveat

While this approach is quick and simple, it imports all components and directives into your application even when they are not being used. This makes your application much larger than you might actually need and will be bad for performance. This is where the next approach comes in. Vuetify comes with plugins for both webpack and vite that enable automatic treeshaking. Treeshaking enables you to drastically lower your build size by only including the components you actually use in the final bundle. You may also opt to manually import components when not using a loader plugin. See docs for more information.

Vite Plugin Setup

1. Create Nuxt 3 Application

npx nuxi init vuetify3-nuxt3-vite
cd vuetify3-nuxt3-vite
yarn install

2. Add Vuetify 3 & Vite Plugin

yarn add -D vuetify vite-plugin-vuetify

3. Add mdi + font (optional)

yarn add -D @mdi/font

4. Create & Configure Nuxt Vuetify plugin

mkdir -p plugins
touch ./plugins/vuetify.ts

• Paste the following code inside the plugins/vuetify.ts file

// Vuetify
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    ssr: true, // Detect if SSR is used in order to properly render the application.
  })
  nuxtApp.vueApp.use(vuetify)
})

5. Configure nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // ssr: false,
  vite: {
    // Remove/comment if not using ssr | ssr: false
    ssr: {
      noExternal: ['vuetify'],
    },
  },
  modules: [
    async (options, nuxt) => {
      // @ts-ignore
      nuxt.hooks.hook('vite:extendConfig', (config) =>
        config.plugins.push(vuetify()),
      )
    },
  ],
})

6. Run Your Nuxt Application

yarn dev