1. Install required packages
Install the required packages, which are nuxt, vuetify, and sass. This can be done by running the following commands: I am using pnpm but you can use yarn or npm
npx nuxi@latest init my-app
cd my-app
pnpm install
pnpm add vuetify@next sass
2. Create Vuetify plugin file
Create a new file called plugins/vuetify.js and add the following code to it
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)
})
3. Specify sass location for Vuetify
Specify where to find the sass file for Vuetify in the nuxt.config.js file:
export default defineNuxtConfig({
css: ['vuetify/lib/styles/main.sass'],
build: {
transpile: ['vuetify'],
},
})
This will ensure that Nuxt knows where to find the Vuetify sass file and transpile it correctly during the build process.
4. Use Vuetify components
Use Vuetify components in your templates. For example, to add a button, you can use the following code:
<template>
<v-btn variant="tonal">Button</v-btn>
</template>
This will render a button with a tonal variant. You can customize the button by using various props provided by Vuetify.