DEV Community

Cody Bontecou
Cody Bontecou

Posted on • Originally published at codybontecou.com

How to use Vuetify with Nuxt 3

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

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)
})
Enter fullscreen mode Exit fullscreen mode

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,
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (7)

Collapse
 
cooleyarts profile image
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.

Collapse
 
cooleyarts profile image
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.

Collapse
 
prashantnirgun profile image
Prashant Nirgun

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

Collapse
 
paulmod profile image
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:

Collapse
 
codybontecou profile image
Cody Bontecou

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

Collapse
 
paulmod profile image
Paolo Cantoni

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

Thread Thread
 
codybontecou profile image
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.