How to use Vuetify with Nuxt 3

1. Create Nuxt 3 project using the following command:

> npx nuxi init <project-name>

2. Go to the project directory:

> cd <project-name>

3. Install the dependencies:

> yarn install

Note: If you are using npm then use the following command to install the dependencies:

> npm install

4. Once dependencies installation is finished use the following command to add Vuetify:

> yarn add vuetify@^3.0.3

5. Add sass package to the project:

> yarn add sass

6. Create a folder with name “plugins” inside project root folder:

7. Create a file in plugins folder with name “vuetify.ts” and add the following code in that file:

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,
    ssr: true, // make it false if do not need server side rendering
  })
  nuxtApp.vueApp.use(vuetify)
})

8. Create nuxt config file with name “nuxt.config.ts” if not exist and add the following code:

export default defineNuxtConfig({
  css:['vuetify/styles','@mdi/font/css/materialdesignicons.css'],
  build: {
    transpile:['vuetify']
  }
})

Note: Install mdi icons if not installed using the following command:

// For yarn
> yarn add @mdi/font
// For npm
> npm install @mdi/font

9. We are done now :), you can use the Vuetify components in your nuxt 3 project: