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