DEV Community

Cover image for Setting Up Nuxt 3 with Vuetify 3: A Comprehensive Guide
Sarvesh S. Kulkarni
Sarvesh S. Kulkarni

Posted on

20 1 1

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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']
  },
});
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Running the Application

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

npm run dev
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

๐Ÿš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsโ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post โ†’

Top comments (2)

Collapse
 
frederikheld profile image
Frederik Held โ€ข โ€ข Edited

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?

Image of Docusign

๐Ÿ› ๏ธ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more