Nuxt 3 with Vuetify 3

Look at the Nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# project creation
npx nuxi init <project-name>

# open folder
cd <project-name>

# yarn
yarn install

# install vuetify3
yarn add vuetify@next sass mdi

# remove app.vue
rm app.vue

# create folders for pages, plugins, layouts
mkdir pages
mkdir plugins
mkdir layouts

create vuetify.js plugin inside plugins folder

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)
})

update nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    css: [
        'vuetify/lib/styles/main.sass',
        'mdi/css/materialdesignicons.min.css'
    ],
    build: {
        transpile: ['vuetify'],
    },
})

write the code

Add default.vue inside layouts folder
Add index.vue inside pages folder

Development Server

Start the development server on http://localhost:3000

yarn dev

Production

Build the application for production:

yarn build

Locally preview production build:

yarn preview

Install Pinia

Check out the deployment documentation for more information.

Pramod-Devireddy/Nuxt3WithVuetify3