Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

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 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 created
cd <project_folder>
Install dependencies using your favourite node package manager

// using npmnpm install // using yarnyarn install // using pnpmpnpm install
Enter fullscreen modeExit fullscreen mode

Start development server.

// using npmnpm run dev // using yarnyarn dev// using pnpmpnpm run dev
Enter fullscreen modeExit fullscreen mode

Initial view

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

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

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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
michaelsynan profile image
Michael Synan
Front end developer, loves Jazz and Chess. #nuxt #vue #frontend

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

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

CollapseExpand
 
edcsu profile image
Ssewannonda Keith Edwin
I'm an experienced cloud developer who constantly seeks out innovative solutions to everyday problems using agile. I've honed problem solving and collaboration skills.I am into EA FC and F1.

Indeed it would Vuetify what you are showcasing

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

I'm an experienced cloud developer who constantly seeks out innovative solutions to everyday problems using agile. I've honed problem solving and collaboration skills.I am into EA FC and F1.
  • Location
    Kampala, Uganda
  • Joined

Trending onDEV CommunityHot

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp