chore: use unplugin-vuetify

README.md

@@ -1,5 +1,11 @@
 # Vuetify Vue Lazy Hydration with Nuxt
 
-This repository includes:
-- using [Vuetify unimport](https://github.com/vuetifyjs/vuetify/pull/21129) PR: prefix Vuetify directives and components
-- Nuxt Vue Lazy Hydration patching Nuxt hydration module to include slots: check [fix(nuxt): pass slots through to lazy hydrated components](https://github.com/nuxt/nuxt/pull/31649/files) from Daniel Roe, it should be fixed in Nuxt 3.17.0.
+This repository includes (`main` branch):
+- using [Vuetify unimport](https://github.com/vuetifyjs/vuetify/pull/21129) PR: prefix Vuetify directives, components and composables.
+- Nuxt Vue Lazy Hydration patching Nuxt hydration module to include slots: check [fix(nuxt): pass slots through to lazy hydrated components](https://github.com/nuxt/nuxt/pull/31649/files) from Daniel Roe, it should be fixed in Nuxt 3.17.0.
+
+The `use-unplugin-vuetify` branch includes:
+- using [unplugin-vuetify](https://github.com/vuetifyjs/vuetify-loader/pull/347) PR: prefix Vuetify directives, components and composables.
+- Nuxt Vue Lazy Hydration patching Nuxt hydration module to include slots: check [fix(nuxt): pass slots through to lazy hydrated components](https://github.com/nuxt/nuxt/pull/31649/files) from Daniel Roe, it should be fixed in Nuxt 3.17.0.
+
+When switching between `main` and `use-unplugin-vuetify` branches, run `pnpm install` to update the dependencies.

app/components/AppFooter.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+  const year = useState('footer:date', () => new Date().getFullYear())
   const items = shallowRef([
     {
       title: 'Vuetify Documentation',
@@ -57,7 +58,7 @@
       class="text-caption text-disabled"
       style="position: absolute; right: 16px;"
     >
-      &copy; 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
+      &copy; 2016-{{ year }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
       —
       <NuxtLink
         class="text-decoration-none on-surface"

app/pages/calendar.vue

@@ -70,7 +70,7 @@ const weekdays = ref([
             label="View Mode"
             variant="outlined"
             hide-details
-        ></vuetify-select>
+        />
         <vuetify-select
             v-model="weekday"
             :items="weekdays"
@@ -79,7 +79,7 @@ const weekdays = ref([
             label="weekdays"
             variant="outlined"
             hide-details
-        ></vuetify-select>
+        />
       </vuetify-sheet>
       <vuetify-sheet>
         <vuetify-calendar
@@ -88,7 +88,7 @@ const weekdays = ref([
             :events="events"
             :view-mode="type"
             :weekdays="weekday"
-        ></vuetify-calendar>
+        />
       </vuetify-sheet>
     </div>
 
@@ -101,7 +101,7 @@ const weekdays = ref([
           :weekdays="weekday"
           hydrate-on-visible
           @hydrated="onHydrated"
-      ></lazy-vuetify-calendar>
+      />
     </vuetify-sheet>
   </div>
 </template>

modules/auto-import/index.ts

@@ -3,20 +3,26 @@ import type {
     VuetifyComponentsOptions,
     VuetifyComposablesOptions,
     VuetifyDirectivesOptions,
-} from "vuetify/unimport-presets";
+} from "unplugin-vuetify/unimport-presets";
+import type {
+    VuetifyStylesOptions,
+} from "unplugin-vuetify";
+import {
+    VuetifyStylesVitePlugin,
+} from "unplugin-vuetify";
 import {
     VuetifyComposables,
     VuetifyDirectives,
     buildAddonsOptions,
     prepareVuetifyComponents,
-} from "vuetify/unimport-presets";
+} from "unplugin-vuetify/unimport-presets";
 import type {Addon, AddonsOptions} from "unimport";
+import { prepareTransformAssetUrls } from 'unplugin-vuetify/utils'
 import type {AssetURLOptions, AssetURLTagConfig} from "@vue/compiler-sfc";
 import type {ViteConfig} from "@nuxt/schema";
 import defu from 'defu'
-import { transformAssetUrls as vuetifyTransformAssetUrls } from 'vite-plugin-vuetify'
 
-export interface ModuleOptions {
+export interface ModuleOptions extends VuetifyStylesOptions {
     composables?: VuetifyComposablesOptions
     directives?: VuetifyDirectivesOptions
     components?: VuetifyComponentsOptions
@@ -33,7 +39,13 @@ export default defineNuxtModule<ModuleOptions>({
     },
     async setup(options, nuxt) {
 
-        const { directives, composables, components: vuetifyComponents } = options.moduleOptions
+        const {
+            directives,
+            composables,
+            components: vuetifyComponents,
+            mode,
+            registerApi,
+        } = options
 
         nuxt.hook('imports:sources', (sources) => {
             sources.push(
@@ -64,7 +76,7 @@ export default defineNuxtModule<ModuleOptions>({
         })
         // hack vuetify nuxt module removing the vuetify vite plugin
         nuxt.hook('vite:extendConfig', (viteInlineConfig) => {
-            if (vuetifyComponents.prefix) {
+            if (vuetifyComponents?.prefix) {
                 const transformAssetUrls = createTransformAssetUrls(
                     viteInlineConfig,
                 )
@@ -83,6 +95,9 @@ export default defineNuxtModule<ModuleOptions>({
                     }
                 }
             })
+            viteInlineConfig.plugins.push(VuetifyStylesVitePlugin({
+                mode, registerApi,
+            }))
         })
     }
 })
@@ -102,10 +117,7 @@ export function createTransformAssetUrls(viteInlineConfig: ViteConfig) {
         existingTransformAssetUrls = (existingTransformAssetUrls.tags ?? {}) as Record<string, string[]>
     }
 
-    const prefixed = Object.entries(vuetifyTransformAssetUrls).reduce((acc, [key, value]) => {
-        acc[key.replace(/^V/, 'Vuetify')] = value
-        return acc
-    }, {} as Record<string, string[]>)
+    const prefixed = prepareTransformAssetUrls(true)
 
     const transformAssetUrls = normalizeTransformAssetUrls(
         defu(existingTransformAssetUrls, prefixed)
@@ -148,7 +160,7 @@ function normalizeTransformAssetUrls(transformAssetUrls: Record<string, string[]
     let kebab: string
     let pascal: string
     for (const name of names) {
-        transformAssetUrls[name] = normalizeTransformAssetUrlsAttrs(transformAssetUrls[name])
+        transformAssetUrls[name] = normalizeTransformAssetUrlsAttrs(transformAssetUrls[name]!)
         kebab = toKebabCase(name)
         pascal = pascalize(name)
         if (!names.has(kebab))

nuxt.config.ts

@@ -29,11 +29,12 @@ export default defineNuxtConfig({
   modules: ['@nuxt/fonts', 'vuetify-nuxt-module', '@nuxt/eslint'],
 
   vuetifyAutoImport: {
-    moduleOptions: {
-      composables: { prefix: true },
-      components: { prefix: true },
-      directives: { prefix: true },
-    }
+    composables: { prefix: true },
+    components: { prefix: true },
+    directives: { prefix: true },
+    mode: {
+      configFile: 'assets/settings.scss',
+    },
   },
   vuetify: {
     moduleOptions: {
@@ -51,9 +52,11 @@ export default defineNuxtConfig({
 
       // /* If customizing sass global variables ($utilities, $reset, $color-pack, $body-font-family, etc) */
       // disableVuetifyStyles: true,
-      styles: {
+      styles: true,
+      // disable vuetify styles from the module
+      /*styles: {
         configFile: 'assets/settings.scss',
-      },
+      },*/
     },
   },
 })

package.json

@@ -18,14 +18,16 @@
     "eslint": "^9.0.0",
     "nuxt": "^3.16.2",
     "vue": "latest",
-    "vuetify": "file:vuetify-3.8.0.tgz"
+    "vuetify": "^3.8.1"
   },
   "devDependencies": {
     "@mdi/font": "^7.4.47",
     "@nuxt/fonts": "^0.11.1",
+    "@nuxt/kit": "^3.16.2",
     "sass-embedded": "^1.86.3",
     "typescript": "^5.6.3",
     "unimport": "^5.0.0",
+    "unplugin-vuetify": "file:unplugin-vuetify-v1.0.0.tgz",
     "vite-plugin-vuetify": "^2.1.1",
     "vue-tsc": "^2.1.6",
     "vuetify-nuxt-module": "^0.18.6"