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
Start development server.
// using npm
npm run dev
// using yarn
yarn dev
// using pnpm
pnpm run dev
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
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);
});
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"
],
},
})
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)
Love to see it! Just did a Nuxt tutorial on Intersection Observer - would work well with Vuetify components!
dev.to/michaelsynan/reveal-on-scro...
Indeed it would Vuetify what you are showcasing