Vuetify in nuxt 3

Vuetify in Nuxt 3 for doing amazing things.

• ✨  Release Notes

Features

So many guide on how to configure vuetify with nuxt 3, but you need to know only one module to include it

Quick Setup

1. Add nuxt-3-vuetify dependency to your project

# Using pnpm
pnpm add -D nuxt-3-vuetify

# Using yarn
yarn add --dev nuxt-3-vuetify

# Using npm
npm install --save-dev nuxt-3-vuetify

2. Add nuxt-3-vuetify to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-3-vuetify'
  ],
  vuetify: { // file configure scss variables 
    // more here https://vuetifyjs.com/en/features/sass-variables/
    scssSettingsSrc: 'settings.scss'
    vuetifyOptions: { // options passed to createVuetify, // components and directives omitted but included
     // more here https://vuetifyjs.com/en/getting-started/installation/
      blueprint: mdi3,
      defaults: {
        ...
      }
    }
  }
})

That's it! You can now use Vuetify in nuxt 3 in your Nuxt app ✨ Zero build headache