# How to use Vuetify with Nuxt 3

Utilize the latest versions of Vuetify and Nuxt together.

Cody Bontecou · May 04 2022 · minute read

# Installation

Start by creating a Nuxt 3 project if you do not have one already.

npx nuxi init nuxt-app

Then run cd nuxt-app and run yarn to make sure your dependencies are installed.

Now that our Nuxt 3 project is setup, we are ready to integrate Vuetify. While you are in the nuxt application's root directory, run the following command to install Vuetify 3 and it's dependency, sass.

yarn add vuetify@next sass

Your package.json should now look similar to the following:

// package.json
"devDependencies": {
  "nuxt": "3.0.0-rc.1"
},
"dependencies": {
  "sass": "^1.51.0",
  "vuetify": "^3.0.0-beta.1"
}

# Creating our Vuetify plugin

We have Vuetify installed, now we need it to talk to Nuxt. We will do this by using Nuxt's plugin (opens new window) feature.

Create a plugins folder then create a file named vuetify.js and put it in the newly created plugins folder.

Then, within the vuetify.js file, paste the following code into it:

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

This is mostly documented here (opens new window) within Vuetify's explanation. The key difference is we use nuxtApp.vueApp.use(vuetify) rather than app.use(vuetify).

# Configure Nuxt 3 to use our new plugin

Our last bit of configuration occurs in our nuxt.config.ts file. This is where we tell Nuxt how to properly find and build Vuetify's sass.

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

# Integrate Vuetify's mdi icons

It seems using v-icon requires additional configuration. Thank you @cbrhex for figuring this out here (opens new window).

Install mdi using yarn add mdi
Add the css to your nuxt.config.ts file.

// nuxt.config.ts
import {defineNuxtConfig} from 'nuxt'

export default defineNuxtConfig({
    css: [
        ....
        'mdi/css/materialdesignicons.min.css',
        ...
    ],
})

If you've followed along this far, your nuxt.config.ts file should look like:

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', 'mdi/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

# Enjoy Vuetify alongside Nuxt 3

Everything should now be working as expected and you should now be able to utilize the wide array Vuetify components within your Nuxt pages!

Enjoy!

Here's the repo (opens new window) if you'd like to see a working project.

Nuxt 3 and Pinia →