Setting Up Nuxt 3 with Vuetify 3: A Comprehensive Guide

Nuxt 3 and Vuetify 3 are powerful tools that can help you build modern, responsive, and performant web applications. Nuxt 3 provides a framework for building Vue.js applications, while Vuetify 3 offers a comprehensive UI component library. Combining these two technologies allows you to create stunning and functional web apps with ease.

Prerequisites

Before you begin, ensure you have the following prerequisites:

1. Node.js: Install Node.js, which includes the npm package manager.
2. Vite: Install Vite, a front-end build tool used by Nuxt 3.
3. Basic Vue.js Knowledge: Familiarity with Vue.js concepts and syntax is recommended.

Creating a Nuxt 3 Project

1. Create a Project Directory: Create a new directory for your Nuxt 3 project.
2. Initialize Nuxt: Open a terminal window and navigate to the project directory. Run the following command to initialize a new Nuxt 3 project:

npx nuxi init nuxt-app

This command will create a basic Nuxt 3 project.

Installing Vuetify 3

Install the required Vuetify modules as dependencies:

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

Creating a Vuetify Plugin

1. Create a Plugins Folder: Create a directory named plugins inside the Nuxt 3 project root.
2. Create the Vuetify Plugin: Inside the plugins directory, create a file named vuetify.ts.
3. Import Vuetify: Import Vuetify and its components using the following code:

import { createVuetify } from 'vuetify'

Configure And Export Vuetify : Create a Vuetify instance and configure its options:

   export default defineNuxtPlugin((nuxtApp) => {
   const vuetify = createVuetify({
    icons: {
      defaultSet: 'mdi',

    },
   })
   nuxtApp.vueApp.use(vuetify)
})

Integrating Vuetify with Nuxt 3

Import Vuetify Plugin And Enable Sass/SCSS Support: In the nuxt.config.js file, import the Vuetify plugin:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'

export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass',
    "@mdi/font/css/materialdesignicons.css",
  ],
  build: {
    transpile: ['vuetify']
  },
});

Use Vuetify Components: You can now use Vuetify components in your Vue.js templates. For example, to add a button:

<v-btn>Click Me</v-btn>

Running the Application

To start the Nuxt 3 development server, run the following command in the project directory:

npm run dev

This will start the server and open your application in the browser. You can now start developing your Nuxt 3 application with Vuetify 3.