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.

Comments

[Frederik Held]

Thanks for the post. How would I integrate i18n with Nuxt and Vuetify?

Can I use the i18n feature that comes with Vuetify?

The Vuetify docs also mention that Vuetify has an integration for vue-i18n, which also has an adapter for Nuxt (but it is currently under development). So it might become an alternative option but doesn't seem to be ready for production yet.

Which approach would you recomment and how would the configuration look like?