DEV Community

Cover image for The ultimate Nuxt3 Vuetify3 setup
Ssewannonda Keith Edwin
Ssewannonda Keith Edwin

Posted on

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 


Enter fullscreen mode Exit fullscreen mode

Start development server.



// using npm
npm run dev 

// using yarn
yarn dev

// using pnpm
pnpm run dev 


Enter fullscreen mode Exit fullscreen mode

Initial view

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


Enter fullscreen mode Exit fullscreen mode

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



Enter fullscreen mode Exit fullscreen mode

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"
    ],
  },
})


Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
michaelsynan profile image
Michael Synan

Love to see it! Just did a Nuxt tutorial on Intersection Observer - would work well with Vuetify components!

dev.to/michaelsynan/reveal-on-scro...

Collapse
 
edcsu profile image
Ssewannonda Keith Edwin

Indeed it would Vuetify what you are showcasing