Vuetify in nuxt 3
Vuetify in Nuxt 3 for doing amazing things.
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
- Add
nuxt-3-vuetifydependency 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- Add
nuxt-3-vuetifyto themodulessection ofnuxt.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