Setup Vuetify V2 With Nuxt V3 (with page layouts)

Dec 28, 2022

After you setup a Nuxt project.

Install package.

npm install [email protected] sass

Edit nuxt.config.ts

export default defineNuxtConfig({  css: ['vuetify/lib/styles/main.sass'],  build: {    transpile: ['vuetify'],  },})

Create plugins/vuetify.ts

import { createVuetify } from 'vuetify'import * as components from 'vuetify/components'import * as directives from 'vuetify/directives'export default defineNuxtPlugin(nuxtApp => {  // https://next.vuetifyjs.com/en/getting-started/installation/#manual-steps  const vuetify = createVuetify({    components,    directives,  })  nuxtApp.vueApp.use(vuetify)})

NOTE: I didn't import Vuetify's mdi icons

Sample layouts using vuetify: layouts/default.vue

<script setup>const bottomLinks = {  'Lua Software': 'https://www.luasoftware.com/',  'Tutorials': '/tutorials',  'Privacy': '/privacy',  'About': '/about'}  </script><template>  <v-app>        <v-app-bar :elevation="0" class="!bg-gray-50" :absolute="true">                <img src="/img/logo-icon.png" class="ml-3" width="36" height="36" />        <v-app-bar-title>          <NuxtLink to="/" class="no-link">Lua Software Code</NuxtLink>        </v-app-bar-title>        <v-btn class="ml-3 !capitalize no-link" to="/tutorials">Tutorials</v-btn>    </v-app-bar>        <v-main>      <v-container>        <slot />      </v-container>    </v-main>    <v-footer class="!p-0">        <v-sheet          class="w-full !bg-gray-50 p-5"        >          <v-row justify="center" no-gutters>            <v-btn              v-for="(url, text) in bottomLinks"              :key="text"              variant="text"              rounded="xl"              class="!capitalize no-link"              :to="url"            >              {{ text }}            </v-btn>            <v-col class="text-center mt-3" cols="12">              {{ new Date().getFullYear() }} &copy; luasoftware.com            </v-col>          </v-row>        </v-sheet>    </v-footer>  </v-app></template><style>a.no-link {  color: inherit;  text-decoration: inherit;} a.no-link:hover {  color: inherit;  text-decoration: underline;}</style>

NOTE: Explore vuetify components treeshaking in Nuxt V3

References:

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.