fix!: #app module augmentation and types (#156)

* feat!: use latest Nuxt, Vite and Vuetify

* chore: fix types

* chore: update lockfile

* chore: full types refactor

* chore: cleanup

* chore: include imports inside module

* chore: workaround nuxt module builder

* chore: bump to VP rc.27

* chore: revert module builder workaround

* docs: include using edge i18n module hint

* chore: use d.mts for default exports types

* chore: update module hook in playground

* chore: bump to latest VP and PWA

* chore: fix lint

* chore: revert main entry + add playground as workspace

* chore: fix lint

* chore: add vue-tsc to playground

* fix: configure ts properly for vue-tsc in module and playground

* chhore: bump to Vuetify 3.4.3

* chore: revert nuxt module augmentations

Author: userquin

.nuxtrc

@@ -1 +1,2 @@
 typescript.includeWorkspace=true
+typescript.tsConfig.exclude[]=../playground

.stackblitz.js

@@ -1,6 +1,6 @@
 import { promises as fsPromises } from 'node:fs'
 
-removeParcel('./playground/nuxt.config.mts')
+removeParcel('./playground/nuxt.config.ts')
 
 async function removeParcel(filename) {
   try {

README.md

@@ -28,12 +28,12 @@
 
 - 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
 - 👌 **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
-- 🔌 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
+- 🔌 **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Runtime Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
 - ⚡ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
 - 🛠️ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
 - ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/) 
 - 💥 **SSR**: automatic SSR detection and configuration including [HTTP Client hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints)
-- 🔩 **Nuxt Layers and Hooks**: load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
+- 🔩 **Nuxt Layers and Module Hooks**: load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Module Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
 - 📥 **Vuetify Configuration File**: configure your Vuetify options using a custom `vuetify.config` file, no dev server restart needed
 - 🔥 **Pure CSS Icons**: no more font/js icons, use the new `unocss-mdi` icon set or build your own with UnoCSS Preset Icons
 - 😃 **Icon Fonts**: configure the [icon font](https://vuetifyjs.com/en/features/icon-fonts/) you want to use, the module will automatically import it for you using CDN or local dependencies

custom-configuration.d.ts

@@ -1,3 +1,3 @@
-import { ExternalVuetifyOptions } from './dist/types';
+import type { ExternalVuetifyOptions } from './dist/module'
 declare function defineVuetifyConfiguration(vuetifyOptions: ExternalVuetifyOptions): ExternalVuetifyOptions;
 export { defineVuetifyConfiguration };

docs/.vitepress/config.ts

@@ -120,14 +120,14 @@ export default withPwa(defineConfig({
         text: 'Getting Started',
         link: '/guide/',
       }, {
-        text: 'Nuxt Layers and Hooks',
-        link: '/guide/nuxt-layers-and-hooks',
+        text: 'Nuxt Layers and Module Hooks',
+        link: '/guide/nuxt-layers-and-module-hooks',
       }, {
         text: 'Vuetify Configuration File',
         link: '/guide/vuetify-configuration-file',
       }, {
-        text: 'Nuxt Plugin Hooks',
-        link: '/guide/nuxt-plugin-hooks',
+        text: 'Nuxt Runtime Hooks',
+        link: '/guide/nuxt-runtime-hooks',
       }, {
         text: 'Server Side Rendering (SSR)',
         link: '/guide/server-side-rendering',

docs/guide/i18n.md

@@ -5,7 +5,9 @@ outline: deep
 # Internationalization
 
 ::: warning
-Requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `8.0.0.beta.13`.
+Requires latest [Edge Release Channel](https://github.com/nuxt-modules/i18n#edge-release-channel) [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `npm:@nuxtjs/i18n-edge`, you may need to reinstall the module to get the latest edge version.
+
+When the new version `8.0.0-rc.6` released, it should be fine: `8.0.0-rc.5` is breaking Nuxt `#app` module augmentation (it is using `#app/nuxt` internally).
 :::
 
 Install and configure [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features.
@@ -18,7 +20,7 @@ NOTE: You need to provide the translations by yourself. The module won't provide
 
 ### Basic configuration
 
-The `@nuxtjs/i18n` module `8.0.0.beta.13` requires to split Nuxt (`@nuxtjs/i18n`) and Vue (`vue-i18n`) configuration files. In the previous beta versions, we could use a single configuration file, but using the latest beta version, we need to split them:
+The `@nuxtjs/i18n` module, from version `8.0.0.beta.13+`, requires splitting Nuxt (`@nuxtjs/i18n`) and Vue (`vue-i18n`) configuration files. In the previous beta versions, we could use a single configuration file, but now we need to split them:
 
 #### Nuxt configuration
 

docs/guide/icons/svg-icons.md

@@ -88,7 +88,7 @@ export default defineNuxtConfig({
         svg: {
           fa: {
             libraries: [
-              [/* default export? */ false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
+              [/* default export? */false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
             ]
           }
         }
@@ -114,7 +114,7 @@ export default defineNuxtConfig({
         svg: {
           fa: {
             libraries: [
-              [/* default export? */ false, /* export name */ 'fad', /* library */ '@fortawesome/pro-duotone-svg-icons']
+              [/* default export? */false, /* export name */ 'fad', /* library */ '@fortawesome/pro-duotone-svg-icons']
             ]
           }
         }

docs/guide/icons/unocss-preset-icons.md

@@ -118,7 +118,7 @@ This module provides the `mdi` icons via `unocss-mdi` icon set. `unocss-mdi` ico
 This is a Nuxt Plugin example using [@iconify-json/mdi](https://icon-sets.iconify.design/mdi/) collection (manual `unocss-mdi` icon set replacement), replace the icons using your new collection:
 ```ts
 // @unocss-include DON'T FORGET TO ADD THIS COMMENT
-import { mdi } from 'vuetify/lib/iconsets/mdi'
+import { mdi } from 'vuetify/iconsets/mdi'
 import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin((nuxtApp) => {

docs/guide/index.md

@@ -6,6 +6,10 @@ outline: deep
 
 Welcome to the Vuetify Nuxt Module documentation.
 
+::: warning Breaking Changes
+From `v0.7.0` version, this module requires `Nuxt v3.6.5+`.
+:::
+
 You can open the vuetify-nuxt-module GitHub repo in StackBlitz to start playing with the playground:
 
 <a href="https://stackblitz.com/github/userquin/vuetify-nuxt-module" target="_blank" rel="noopener noreferrer">

docs/guide/nuxt-layers-and-hooks.md renamed to docs/guide/nuxt-layers-and-module-hooks.md

@@ -2,9 +2,13 @@
 outline: deep
 ---
 
-# Nuxt Layers and Hooks
+# Nuxt Layers and Module Hooks
 
-You can load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time).
+You can load your Vuetify configuration using [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers) or using a custom module via `vuetify:registerModule` [Nuxt Module Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time).
+
+::: warning
+If you're **NOT** using Nuxt `^3.8.1+`, you should use `// @ts-expect-error` when using the `vuetify:registerModule` nuxt module hook, TypeScript will complain.
+:::
 
 ## Nuxt Layers
 
@@ -19,7 +23,7 @@ export default defineNuxtConfig({
 })
 ```
 
-## Nuxt Hook
+## Nuxt Module Hook
 
 You can use a custom module to load your Vuetify configuration:
 ```ts
@@ -36,6 +40,7 @@ and your module will load your configuration via `vuetify:registerModule` Nuxt h
 // modules/my-vuetify-module
 export default defineNuxtModule({
   setup(_options, nuxt) {
+    // If you're using Nuxt < 3.8.1, you should add a ts-expect-error here
     nuxt.hook('vuetify:registerModule', register => register({
       moduleOptions: {
         /* module specific options */

docs/guide/nuxt-plugin-hooks.md renamed to docs/guide/nuxt-runtime-hooks.md

@@ -1,6 +1,6 @@
-# Nuxt Plugin Hooks
+# Nuxt Runtime Hooks
 
-This module configures and registers Vuetify using Nuxt plugins via `vuetify:configuration` hook.
+This module configures and registers Vuetify using Nuxt plugins via `vuetify:configuration` runtime hook.
 
 `vuetify:configuration` hook is for internal use and not meant to be used by third-party plugins or directly from your application.
 This module will expose only the necessary Nuxt plugins to configure Vuetify using the options you've configured in your application:

docs/index.md

@@ -25,9 +25,9 @@ features:
     details: Sensible built-in default Vuetify configuration for common use cases
   - icon: 🔌
     title: Extensible
-    details: Expose the ability to customize the Vuetify configuration via Nuxt Plugin Hooks
-    link: /guide/nuxt-plugin-hooks
-    linkText: Nuxt Plugin Hooks
+    details: Expose the ability to customize the Vuetify configuration via Nuxt Runtime Hooks
+    link: /guide/nuxt-runtime-hooks
+    linkText: Nuxt Runtime Hooks
   - icon: ⚡
     title: Fully tree shakable
     details: By default, only the needed Vuetify components are imported
@@ -43,10 +43,10 @@ features:
     link: /guide/server-side-rendering
     linkText: Server Side Rendering
   - icon: 🔩
-    title: Nuxt Layers and Hooks
-    details: Load your Vuetify configuration using Nuxt Layers or using a custom module via custom Nuxt Hook
-    link: /guide/nuxt-layers-and-hooks
-    linkText: Nuxt Layers and Hooks
+    title: Nuxt Layers and Module Hooks
+    details: Load your Vuetify configuration using Nuxt Layers or using a custom module via custom Nuxt Module Hook
+    link: /guide/nuxt-layers-and-module-hooks
+    linkText: Nuxt Layers and Module Hooks
   - icon: 📥
     title: Vuetify Configuration File
     details: Configure your Vuetify options using a custom <strong>vuetify.config</strong> file, no dev server restart needed

docs/package.json

@@ -11,15 +11,15 @@
     "generate-pwa-icons": "pwa-assets-generator"
   },
   "dependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.3.8"
   },
   "devDependencies": {
     "@iconify-json/carbon": "^1.1.21",
     "@types/node": "^20.6.0",
-    "@vite-pwa/assets-generator": "^0.0.10",
-    "@vite-pwa/vitepress": "^0.2.3",
+    "@vite-pwa/assets-generator": "^0.0.11",
+    "@vite-pwa/vitepress": "^0.3.0",
     "sitemap": "^7.1.1",
-    "unocss": "^0.53.5",
-    "vitepress": "1.0.0-rc.24"
+    "unocss": "^0.57.3",
+    "vitepress": "1.0.0-rc.29"
   }
 }

docs/tsconfig.json

@@ -1,23 +1,23 @@
 {
   "compilerOptions": {
-    "baseUrl": ".",
-    "module": "esnext",
     "target": "esnext",
     "lib": ["DOM", "ESNext"],
-    "strict": true,
     "jsx": "preserve",
-    "esModuleInterop": true,
-    "skipLibCheck": true,
+    "module": "esnext",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "noUnusedLocals": true,
-    "strictNullChecks": true,
-    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
     "types": [
       "vite/client",
       "vite-plugin-pwa/vanillajs",
       "vitepress"
-    ]
+    ],
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true
   },
   "include": [
     "./*.ts",

package.json

@@ -2,7 +2,7 @@
   "name": "vuetify-nuxt-module",
   "type": "module",
   "version": "0.6.7",
-  "packageManager": "pnpm@8.10.2",
+  "packageManager": "pnpm@8.10.5",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -21,18 +21,17 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "require": "./dist/module.cjs",
-      "import": "./dist/module.mjs"
+      "types": "./dist/types.d.mts",
+      "default": "./dist/module.mjs"
     },
     "./custom-configuration": {
       "types": "./custom-configuration.d.ts",
-      "require": "./custom-configuration.cjs",
-      "import": "./custom-configuration.mjs"
+      "default": "./custom-configuration.mjs"
     },
     "./configuration": {
       "types": "./configuration.d.ts"
-    }
+    },
+    "./*": "./*"
   },
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
@@ -43,7 +42,7 @@
     "*.mjs"
   ],
   "scripts": {
-    "prepack": "nuxt-module-build prepare && nuxt-module-build",
+    "prepack": "nuxt-module-build prepare && nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:multiple-json": "MULTIPLE_LANG_FILES=true nuxi dev playground",
     "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
@@ -58,48 +57,52 @@
     "docs:serve": "pnpm -C docs run serve",
     "lint": "eslint .",
     "lint:fix": "nr lint --fix",
+    "publint": "publint",
     "test": "vitest run",
     "test:watch": "vitest watch",
     "release": "bumpp && npm publish"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.6.2",
-    "defu": "^6.1.2",
+    "@nuxt/kit": "^3.8.2",
+    "defu": "^6.1.3",
     "destr": "^2.0.2",
     "local-pkg": "^0.5.0",
     "pathe": "^1.1.1",
     "perfect-debounce": "^1.0.0",
     "ufo": "^1.3.1",
-    "unconfig": "^0.3.9",
+    "unconfig": "^0.3.11",
     "vite-plugin-vuetify": "^1.0.2",
-    "vuetify": "^3.3.23"
+    "vuetify": "^3.4.3"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.41.0",
-    "@antfu/ni": "^0.21.8",
+    "@antfu/eslint-config": "^0.43.1",
+    "@antfu/ni": "^0.21.10",
     "@date-io/luxon": "^2.17.0",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
+    "@fortawesome/vue-fontawesome": "^3.0.5",
     "@iconify-json/carbon": "^1.1.21",
-    "@iconify-json/mdi": "^1.1.54",
-    "@mdi/js": "^7.2.96",
-    "@nuxt/devtools": "^0.7.0",
-    "@nuxt/module-builder": "^0.4.0",
-    "@nuxt/schema": "^3.6.5",
-    "@nuxt/test-utils": "^3.6.5",
-    "@nuxtjs/i18n": "8.0.0-rc.5",
-    "@parcel/watcher": "^2.2.0",
+    "@iconify-json/mdi": "^1.1.55",
+    "@mdi/js": "^7.3.67",
+    "@nuxt/devtools": "^0.8.5",
+    "@nuxt/module-builder": "^0.5.4",
+    "@nuxt/schema": "^3.8.2",
+    "@nuxt/test-utils": "^3.8.1",
+    "@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",
+    "@parcel/watcher": "^2.3.0",
     "@types/node": "^18",
-    "@unocss/nuxt": "^0.53.6",
+    "@unocss/nuxt": "^0.57.7",
     "bumpp": "^9.2.0",
-    "eslint": "^8.49.0",
-    "luxon": "^3.3.0",
-    "nuxt": "^3.6.5",
+    "eslint": "^8.54.0",
+    "luxon": "^3.4.3",
+    "nuxt": "^3.8.2",
+    "publint": "^0.2.5",
+    "rimraf": "^5.0.5",
     "sass": "^1.63.6",
-    "typescript": "^5.2.2",
-    "vite": "^4.3.9",
-    "vitest": "^0.31.4"
+    "typescript": "^5.3.2",
+    "vite": "^4.5.0",
+    "vitest": "^0.34.6",
+    "vue-tsc": "^1.8.22"
   },
   "build": {
     "externals": [

playground/.nuxtrc

@@ -0,0 +1 @@
+typescript.tsConfig.exclude[]=../src/runtime

playground/layer-module/index.ts

@@ -2,7 +2,7 @@ import { defineNuxtModule } from '@nuxt/kit'
 
 export default defineNuxtModule({
   setup(_options, nuxt) {
-    nuxt.hook('vuetify:registerModule', (register: any) => register({
+    nuxt.hook('vuetify:registerModule', registerModule => registerModule({
       vuetifyOptions: {
         aliases: {
           MyBtn: 'VBtn',

playground/layer-module/nuxt.config.ts

@@ -1,6 +1,5 @@
 export default defineNuxtConfig({
   // since it is local, the path is relative to the playground folder
-  modules: ['../src/module'],
   // @ts-expect-error just ignore types
   setup(_options, nuxt) {
     nuxt.hook('vuetify:registerModule', (register: any) => register({

playground/layers/vuetify-layer/nuxt.config.ts

@@ -1,6 +1,5 @@
 export default defineNuxtConfig({
   // since it is local, the path is relative to the playground folder
-  modules: ['../src/module'],
   // vuetify: {
   // vuetifyOptions: './vuetify.config.ts',
   /* vuetifyOptions: {

playground/layers/vuetify-layer/vuetify.config.ts

@@ -1,4 +1,4 @@
-import type { ExternalVuetifyOptions } from '../../../src/types'
+import type { ExternalVuetifyOptions } from 'vuetify-nuxt-module'
 
 /*
 import { defineVuetifyConfiguration } from '../../../custom-configuration'