Setup Vuetify V2 With Nuxt V3 (with page layouts)

npm install vuetify@next sass

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

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

<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>