The ultimate Nuxt3 Vuetify3 setup

Nuxt 3 has many advantages and is the best way to harness Vue 3 awesomeness.

Create a new Nuxt 3 project

use the following guide to create a new Nuxt 3 project
Upon successfully ✨ creating the Nuxt project with v3 template,Next steps:
Enter the project folder that you have just created
cd <project_folder>
Install dependencies using your favourite node package manager

// using npm
npm install 

// using yarn
yarn install 

// using pnpm
pnpm install 

Start development server.

// using npm
npm run dev 

// using yarn
yarn dev

// using pnpm
pnpm run dev 

Add Vuetify 3

Vuetify 3 is powerful Vue Component Framework based on Google’s Material Design specification and comes with hundreds of customisation options that fit any style or design; even if it’s not Material.
Add Vuetify to your project and support packages for sass and icons

// using npm
npm install vuetify@^3.1.13 sass @mdi/font

// using yarn
yarn add vuetify@^3.1.13 sass @mdi/font

// using pnpm
pnpm install vuetify@^3.1.13 sass @mdi/font

Create Vuetify plugin

There is need to add Vuetify as a Nuxt plugin.

Create a plugins folder and create a file named vuetify.js in it.

Add this code snippet in the vuetify.js 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,
  });
  nuxtApp.vueApp.use(vuetify);
});

Vue 3 has no way to automatically detect if SSR is used — so nuxt, gridsome, and other SSR frameworks must manually set the ssr option to true in order to properly render the application.

Add nuxt config

Create nuxt config file with name nuxt.config.ts if it does not exist and add the following config:

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

With this, you should be able to use Vuetify 3 components as you like.

The demo of the finished setup is here and the final code can be found here.