How to use Vuetify with Nuxt 3

Utilize the latest versions of Vuetify and Nuxt together.

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 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 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,
    },
  },
})

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!

Comments

[Spencer Cooley]

I have this exact setup and I keep getting this when I try to add a select element to my temlplate

[Vue warn]: Component is missing template or render function. 21:37:18
[Vue warn]: Failed to resolve component: v-select 21:37:19
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

[Spencer Cooley]

This was my bad. My plugins folder was created inside of the pages directory and I didn't notice till right now. Works perfectly. Thanks.

[Prashant Nirgun]

how can we used mdi and fontawesome 5 both together in nuxt 3 project with vuetify

[Paolo Cantoni]

Hi!
I followed this guide and everything works great, but if I create the pages folder in the root with the files inside it pages, these are never displayed.
Some idea?

The content of the App.vue file is this:

[Cody Bontecou]

Hey Paolo, could you share a reproduction repo? I'm happy to take a look and help you out.

[Paolo Cantoni]

here the repo:
github.com/paulmod/nuxt-vuetify
thanks in advance

[Cody Bontecou]

Hey Paolo, it looks like your nuxt config isn't reflecting the changes mentioned in this blog post. Make sure to follow each step precisely for it to work.