
Nuxt 3 has many advantages and is the best way to harnessVue 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 createdcd <project_folder>
Install dependencies using your favourite node package manager
// using npmnpm install // using yarnyarn install // using pnpmpnpm install
Start development server.
// using npmnpm run dev // using yarnyarn dev// using pnpmpnpm run dev
Add Vuetify 3
Vuetify 3 is powerful Vue Component Framework based on Google’sMaterial 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 npmnpm install vuetify@^3.1.13 sass @mdi/font// using yarnyarn add vuetify@^3.1.13 sass @mdi/font// using pnpmpnpm install vuetify@^3.1.13 sass @mdi/font
Create Vuetify plugin
There is need to add Vuetify as aNuxt plugin.
Create aplugins folder and create a file namedvuetify.js in it.
Add this code snippet in thevuetify.js file:
import{createVuetify}from"vuetify";import*ascomponentsfrom"vuetify/components";import*asdirectivesfrom"vuetify/directives";exportdefaultdefineNuxtPlugin((nuxtApp)=>{constvuetify=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 namenuxt.config.ts if it does not exist and add the following config:
// https://nuxt.com/docs/api/configuration/nuxt-configexportdefaultdefineNuxtConfig({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.
Thedemo of the finished setup is here and thefinal code can be found here.
Top comments(2)

- Email
- LocationNew York City, New York
- Joined
Love to see it! Just did a Nuxt tutorial on Intersection Observer - would work well with Vuetify components!

- Email
- LocationKampala, Uganda
- Joined
Indeed it would Vuetify what you are showcasing
For further actions, you may consider blocking this person and/orreporting abuse