feat!: use Nuxt components loader instead custom Vite plugin

date-io-playground/package.json

@@ -31,10 +31,10 @@
     "moment": "^2.29.4",
     "moment-hijri": "^2.1.2",
     "moment-jalaali": "0.9.2",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.1",
     "sass-embedded": "^1.77.8",
-    "typescript": "^5.5.4",
-    "vue-tsc": "^2.0.29",
+    "typescript": "^5.6.2",
+    "vue-tsc": "^2.1.6",
     "vuetify-nuxt-module": "workspace:*"
   }
 }

docs/package.json

@@ -11,17 +11,17 @@
     "generate-pwa-icons": "pwa-assets-generator"
   },
   "dependencies": {
-    "vue": "^3.4.21"
+    "vue": "^3.5.4"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.37",
     "@types/node": "^20.6.0",
-    "@vite-pwa/assets-generator": "^0.2.4",
-    "@vite-pwa/vitepress": "^0.5.0",
+    "@vite-pwa/assets-generator": "^0.2.6",
+    "@vite-pwa/vitepress": "^0.5.3",
     "sitemap": "^8.0.0",
-    "unocss": "^0.62.1",
-    "vite-plugin-pwa": "^0.20.1",
-    "vitepress": "^1.3.2",
+    "unocss": "^0.62.3",
+    "vite-plugin-pwa": "^0.20.5",
+    "vitepress": "^1.3.4",
     "workbox-window": "^7.1.0"
   }
 }

modern-sass-compiler/package.json

@@ -9,15 +9,15 @@
   },
   "dependencies": {
     "@iconify-json/mdi": "^1.1.68",
-    "vuetify": "^3.7.0"
+    "vuetify": "^3.7.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@unocss/nuxt": "^0.62.1",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.1",
     "sass-embedded": "^1.77.8",
-    "typescript": "^5.5.4",
-    "vue-tsc": "^2.0.29",
+    "typescript": "^5.6.2",
+    "vue-tsc": "^2.1.6",
     "vuetify-nuxt-module": "workspace:*"
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "vuetify-nuxt-module",
   "type": "module",
   "version": "0.18.3",
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <[email protected]>",
   "license": "MIT",
@@ -65,7 +65,7 @@
     "release": "bumpp && npm publish"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.12.4",
+    "@nuxt/kit": "^3.13.1",
     "defu": "^6.1.4",
     "destr": "^2.0.3",
     "local-pkg": "^0.5.0",
@@ -75,7 +75,7 @@
     "unconfig": "^0.5.5",
     "upath": "^2.0.1",
     "vite-plugin-vuetify": "^2.0.4",
-    "vuetify": "^3.7.0"
+    "vuetify": "^3.7.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.43.1",
@@ -88,9 +88,9 @@
     "@iconify-json/mdi": "^1.1.68",
     "@mdi/js": "^7.4.47",
     "@nuxt/devtools": "latest",
-    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.12.3",
-    "@nuxt/test-utils": "^3.13.1",
+    "@nuxt/test-utils": "^3.14.2",
     "@nuxtjs/i18n": "^8.0.0",
     "@parcel/watcher": "^2.3.0",
     "@types/node": "^18",
@@ -102,10 +102,10 @@
     "publint": "^0.2.10",
     "rimraf": "^6.0.1",
     "sass": "^1.77.8",
-    "typescript": "^5.5.4",
+    "typescript": "^5.6.2",
     "vite": "^5.0.12",
-    "vitest": "^2.0.5",
-    "vue-tsc": "^2.0.29"
+    "vitest": "^2.1.1",
+    "vue-tsc": "^2.1.6"
   },
   "pnpm": {
     "peerDependencyRules": {
@@ -115,9 +115,9 @@
     }
   },
   "resolutions": {
-    "@nuxt/kit": "3.12.4",
-    "vite": "5.4.1",
-    "vue": "3.4.31"
+    "@nuxt/kit": "3.13.1",
+    "vite": "5.4.5",
+    "vue": "3.5.4"
   },
   "build": {
     "externals": [

playground/declarations.d.ts

@@ -0,0 +1,10 @@
+// vuetify 3.7.1 or nuxt i18n module augmenting `@vue/runtime-core` instead `vue`
+import type {
+  ComponentCustomOptions as _ComponentCustomOptions,
+  ComponentCustomProperties as _ComponentCustomProperties,
+} from 'vue';
+
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties extends _ComponentCustomProperties {}
+  interface ComponentCustomOptions extends _ComponentCustomOptions {}
+}

playground/package.json

@@ -15,16 +15,16 @@
     "@iconify-json/mdi": "^1.1.68",
     "@mdi/js": "^7.4.47",
     "luxon": "^3.4.3",
-    "vuetify": "^3.7.0"
+    "vuetify": "^3.7.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
     "@nuxtjs/i18n": "^8.3.3",
     "@unocss/nuxt": "^0.62.1",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.1",
     "sass-embedded": "^1.77.8",
-    "typescript": "^5.5.4",
-    "vue-tsc": "^2.0.29",
+    "typescript": "^5.6.2",
+    "vue-tsc": "^2.1.6",
     "vuetify-nuxt-module": "workspace:*"
   }
 }

playground/pages/index.vue

@@ -7,6 +7,9 @@ definePageMeta({
   middleware: 'vuetify',
 })
 
+const ResolvedVBtn = resolveComponent('v-btn')
+const OtherResolvedVBtn = resolveComponent('VBtn')
+
 const value = reactive<{
   name1?: string
   name2?: string
@@ -43,6 +46,11 @@ function toogleTheme() {
   theme.global.name.value = theme.global.name.value === 'light' ? 'dark' : 'light'
 }
 
+function onClickOutside(e: MouseEvent) {
+  // eslint-disable-next-line no-console
+  console.log('onClickOutside', e)
+}
+
 // const rtl = ref(isRtl.value)
 
 watch(isRtl, (x) => {
@@ -121,6 +129,12 @@ watch(current, () => {
     <button class="mb-2 ml-2 px-2 my-button text-white bg-primary rounded-lg">
       Reserve
     </button>
+
+    <ResolvedVBtn>resolveComponent('v-btn')</ResolvedVBtn>
+    <OtherResolvedVBtn>resolveComponent('VBtn')</OtherResolvedVBtn>
+    <LazyVBtn v-click-outside="onClickOutside" v-ripple>
+      LazyVBtn
+    </LazyVBtn>
   </div>
 </template>
 

playground/pages/no-ssr.vue

@@ -5,6 +5,9 @@ const { locales } = useI18n()
 const { current } = useLocale()
 const theme = useTheme()
 
+const ResolvedVBtn = resolveComponent('v-btn')
+const OtherResolvedVBtn = resolveComponent('VBtn')
+
 const enableToogleTheme = computed(() => {
   if (ssrClientHintsConfiguration.prefersColorScheme && ssrClientHintsConfiguration.prefersColorSchemeOptions)
     return !ssrClientHintsConfiguration.prefersColorSchemeOptions.useBrowserThemeOnly
@@ -15,6 +18,10 @@ const enableToogleTheme = computed(() => {
 function toogleTheme() {
   theme.global.name.value = theme.global.name.value === 'light' ? 'dark' : 'light'
 }
+function onClickOutside(e: MouseEvent) {
+  // eslint-disable-next-line no-console
+  console.log('onClickOutside', e)
+}
 </script>
 
 <template>
@@ -27,6 +34,15 @@ function toogleTheme() {
       <v-btn v-if="enableToogleTheme" @click="toogleTheme">
         toogle theme
       </v-btn>
+      <ResolvedVBtn v-click-outside="onClickOutside" v-ripple>
+        resolveComponent('v-btn')
+      </ResolvedVBtn>
+      <OtherResolvedVBtn v-click-outside="onClickOutside" v-ripple>
+        resolveComponent('VBtn')
+      </OtherResolvedVBtn>
+      <LazyVBtn v-click-outside="onClickOutside" v-ripple>
+        LazyVBtn
+      </LazyVBtn>
     </div>
     <v-select
       v-model="current"