How to use Vuetify with Nuxt 3 – Complete Installation Guide

At some point, you will need to use Vuetify 3 with Nuxt 3 as a developer.

But the real question is how to use Vuetify with Nuxt 3. Vuetify is a Material Design Component Framework for Vue.js. Nuxt 3 is a front-end framework for creating universal web apps.

Installation Requirements:

To Proceed, it is essential to have the most recent stable version of node.js installed. We recommend using node.js version 14 or higher and npm.js version 6 or higher for the optimal environment. You can download if from https://nodejs.org

Installation Process:

If you don’t already have a Nuxt 3 project, you need to start by creating one.

npx nuxi init nuxt-app

After that, you need to run cd nuxt-app. To ensure that all your dependencies are installed correctly run yarn.

Once done we will be ready to integrate Vuetify because the Nuxt 3 project is now set up. Now that you are in the root directory of the Nuxt application, you need to run the command mentioned below to install sass, Vuetify 3, and its dependency.

yarn add vuetify@next sass

After that, your package.json would be looking something like this (mentioned below).

// package.json

"devDependencies": {

  "nuxt": "3.0.0"

},

"dependencies": {

  "sass": "^1.51.0",

  "vuetify": "^3.0.1"

}

Creating the Vuetify Plugin:

Now that we have vuetify installed, the next step on how to use Vuetify with Nuxt 3 is creating the vuetify plugin. To make this happen we need Vuetify to talk to Nuxt. This will be done by using Nuxt’s plugin feature.

Firstly, you have to make a folder named plugins and then create a file vuetify.js. Now put this file into the folder that you just created with the name plugins.

After that, you need to paste the following code in the vuetify.js file.

// 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({
ssr: true,
components,
directives,
  })
  nuxtApp.vueApp.use(vuetify)
})

This step is documented and described in the Vuetify explanation that you can check out by clicking here. However, there is one key difference because we use nuxtApp.vueApp.use(vuetify)instead ofapp.use(vuetify).

To Use Our New Plugin, Configure Nuxt 3

The last configuration will happen in our nuxt.config.ts file in this step. Now we will tell Nuxt how to find and build Vuetify’s sass properly.

// 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,

},

  },

})

Now Integrate The mdi Icons of Vuetify

We know that in order to use the v-icon we would need some additional configuration. But thanks to @cbrhex for figuring this out for us here. The steps are mentioned below.

1.      To begin with, you need to install the mdi using yarn add @mdi/font

2.     In the next step, we have to add the CSS in your nuxt.config.ts file.

// nuxt.config.ts

import {defineNuxtConfig} from 'nuxt'

export default defineNuxtConfig({

css: [

     ....

        '@mdi/font/css/materialdesignicons.min.css',

     ...

],

})

Customization of Sass Variables

You can customize and extend the sass variables by powering Vuetify. This requires installing vite-plugin-vuetify and importing some of the Nuxt-specific modules.

yarn add vite-plugin-vuetify

Now you have to add the code mentioned below to your nuxt config.

// nuxt.config.ts

import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

  ...

  hooks: {

'vite:extendConfig': (config) => {

   config.plugins.push(

     vuetify({

       styles: { configFile: resolve('./settings.scss') },

     })

   )

}

  ...

This will help us in pointing Vuetify to settings.scss file which will be present in the same directory as the nuxt.config.ts file. You can make global variable changes in your .scss file using the syntax mentioned below:

// settings.scss

@forward 'vuetify/settings' with (

  $button-color: green,

  $button-font-weight: 700

);

Now in the component you have to make these changes:

// app.vue

<template>

  <v-btn>Hello Sass Changes</v-btn>

</template>

<style lang="scss">

@use './settings';

</style>

In case you want to have a look at a working example you can see the example repo.

If you have followed our steps correctly until now then your nuxt.config.ts file would look something like this:

// nuxt.config.ts

import vuetify from 'vite-plugin-vuetify'

import { createResolver } from '@nuxt/kit'

const { resolve } = createResolver(import.meta.url)

export default defineNuxtConfig({

  css: [

'vuetify/lib/styles/main.sass',

    '@mdi/font/css/materialdesignicons.min.css',

  ],

  build: {

transpile: ['vuetify'],

  },

  hooks: {

'vite:extendConfig': config => {

   config.plugins.push(

     vuetify({

       styles: { configFile: resolve('./settings.scss') },

     })

   )

},

  },

})

Pro Tip: If you are a developer and want to create a web app using Vuetify  and Nuxt 3 then we have a perfect solution for you. Adminmart has developed “Modernize Nuxt Js Admin Dashboard” template using Nuxt 3 and Vuetify 3. You can download it to get started and all you have to do is customize it according to your requirements.

Finally, Now You Can Use Vuetify With Nuxt 3

Since you have followed all our steps then you should be able to use Vuetify with Nuxt 3. This will allow you to use the wide array Vuetify components from within your Nuxt pages. Additionally, if you like to see a working project here is the repo for you.