vuetify-nuxt-module 1.0.0-beta.10 → 1.0.0-beta.11

package/README.md

@@ -26,25 +26,19 @@
 
 ## 🚀 Features
 
-- 📖 [**Documentation & guides**](https://nuxt.vuetifyjs.com/)
+> 📖 Full [**documentation & guides**](https://nuxt.vuetifyjs.com/)
+
 - 👌 **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 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 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
-- 🎭 **SVG Icons**: ready to use [@mdi/js](https://www.npmjs.com/package/@mdi/js) and [@fortawesome/vue-fontawesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome) SVG icons packs
-- 📦 **Multiple Icon Sets**: register [multiple icon sets](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets)
-- 🌍 **I18n Ready**: install [@nuxtjs/i18n](https://i18n.nuxtjs.org/) Nuxt module, and you're ready to use Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/) features
-- 📆 **Date Components**: use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/) installing and configuring one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
-- 💬 **Auto-Import Vuetify Locale Messages**: add [Vuetify Locale Messages](https://vuetifyjs.com/en/features/internationalization/#getting-started) adding just the locales you want to use, no more imports needed
-- ⚙️ **Auto-Import Vuetify Composables**: you don't need to import Vuetify composables manually, they are automatically imported for you
-- 🎨 **Vuetify Blueprints**: use [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
-- 👀 **Nuxt DevTools**: ready to inspect your Vuetify styles with the [Nuxt DevTools](https://github.com/nuxt/devtools) inspector
+- ⚡ **Fully Tree Shakable**: by default, only the Vuetify components you use are imported
+- 🪄 **Auto-Import**: Vuetify components and composables are auto-imported — no manual imports needed
+- 🔌 **Extensible**: customize the Vuetify configuration via [Nuxt Runtime Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins), [Nuxt Layers](https://nuxt.com/docs/getting-started/layers#layers), the `vuetify:registerModule` [module hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time), or a dedicated `vuetify.config` file
+- 💥 **SSR**: automatic SSR detection and configuration, including [HTTP Client Hints](https://developer.mozilla.org/en-US/docs/Web/HTTP/Client_hints)
+- ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/)
+- 🛠️ **Directives & Labs**: optional [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
+- 🎭 **Icons**: pure-CSS icons (UnoCSS), [icon fonts](https://vuetifyjs.com/en/features/icon-fonts/) (CDN or local), SVG packs ([@mdi/js](https://www.npmjs.com/package/@mdi/js), [FontAwesome](https://www.npmjs.com/package/@fortawesome/vue-fontawesome)), and [multiple icon sets](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets)
+- 🌍 **I18n**: integrate [@nuxtjs/i18n](https://i18n.nuxtjs.org/) for Vuetify [internationalization](https://vuetifyjs.com/en/features/internationalization/), with auto-imported Vuetify locale messages
+- 📆 **Date Components**: use Vuetify [date components](https://vuetifyjs.com/en/features/dates/) via the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
+- 🎨 **Blueprints**: scaffold quickly with [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/)
 - 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
 
 ## 📦 Install

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.15.0"
   },
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -1,7 +1,7 @@
 import { existsSync, statSync, readFileSync } from 'node:fs';
 import { pathToFileURL, fileURLToPath } from 'node:url';
 import { addPluginTemplate, resolvePath, addTemplate, extendWebpackConfig, isNuxtMajorVersion, addImports, addPlugin, addVitePlugin, useLogger, defineNuxtModule, getNuxtVersion, findPath, hasNuxtModule, createResolver } from '@nuxt/kit';
-import { isAbsolute, resolve, dirname, relative } from 'pathe';
+import { isAbsolute, resolve, dirname } from 'pathe';
 import semver from 'semver';
 import { createFilter, version as version$1 } from 'vite';
 import defu from 'defu';
@@ -10,11 +10,10 @@ import Styles from '@vuetify/unplugin-styles/vite';
 import { isPackageExists } from 'local-pkg';
 import { parseQuery, parseURL } from 'ufo';
 import { readFile } from 'node:fs/promises';
-import { debounce } from 'perfect-debounce';
 import process from 'node:process';
 import { createConfigLoader } from 'unconfig';
 
-const version = "1.0.0-beta.10";
+const version = "1.0.0-beta.11";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -354,6 +353,11 @@ function vuetifyConfigurationPlugin(ctx) {
     },
     async load(id) {
       if (id === RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION) {
+        if (ctx.isDev && ctx.canHmrConfig) {
+          for (const file of ctx.vuetifyFilesToWatch) {
+            this.addWatchFile(file);
+          }
+        }
         const {
           directives: _directives,
           date: _date,
@@ -375,7 +379,12 @@ function vuetifyConfigurationPlugin(ctx) {
         }
         const result = await buildConfiguration(ctx);
         const deepCopy = result.messages.length > 0;
-        return `${result.imports}
+        let configDepImports = "";
+        if (ctx.isDev && ctx.canHmrConfig && this.environment?.name === "ssr") {
+          configDepImports = ctx.vuetifyFilesToWatch.map((file) => `import ${JSON.stringify(file)}`).join("\n");
+        }
+        return `${configDepImports}
+${result.imports}
 
 export const isDev = ${ctx.isDev}
 export function vuetifyConfiguration() {
@@ -669,6 +678,11 @@ function vuetifyDateConfigurationPlugin(ctx) {
     },
     async load(id) {
       if (id === RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION) {
+        if (ctx.isDev && ctx.canHmrConfig) {
+          for (const file of ctx.vuetifyFilesToWatch) {
+            this.addWatchFile(file);
+          }
+        }
         if (!ctx.dateAdapter) {
           return `
 export const enabled = false
@@ -741,6 +755,11 @@ function vuetifyIconsPlugin(ctx) {
     },
     async load(id) {
       if (id === RESOLVED_VIRTUAL_VUETIFY_ICONS_CONFIGURATION) {
+        if (ctx.isDev && ctx.canHmrConfig) {
+          for (const file of ctx.vuetifyFilesToWatch) {
+            this.addWatchFile(file);
+          }
+        }
         const {
           enabled,
           unocss,
@@ -1399,14 +1418,8 @@ async function mergeVuetifyModules(options, nuxt) {
     options.vuetifyOptions
   );
   if (nuxt.options.dev && resolvedOptions.sources.length > 0) {
-    if (nuxt.options.ssr) {
-      for (const s of resolvedOptions.sources) {
-        nuxt.options.watch.push(s.replace(/\\/g, "/"));
-      }
-    } else {
-      for (const s of resolvedOptions.sources) {
-        vuetifyConfigurationFilesToWatch.add(s.replace(/\\/g, "/"));
-      }
+    for (const s of resolvedOptions.sources) {
+      vuetifyConfigurationFilesToWatch.add(s.replace(/\\/g, "/"));
     }
   }
   moduleOptions.unshift({
@@ -1523,7 +1536,7 @@ function prepareSSRClientHints(baseUrl, ctx) {
   return clientHints;
 }
 
-async function load(options, nuxt, ctx) {
+async function load(options, nuxt, ctx, reload = false) {
   const {
     configuration,
     vuetifyConfigurationFilesToWatch
@@ -1568,9 +1581,11 @@ async function load(options, nuxt, ctx) {
       ctx.dateAdapter = date[0];
     }
   }
-  const oldIcons = ctx.icons;
-  if (oldIcons && oldIcons.cdn?.length && nuxt.options.app.head.link) {
-    nuxt.options.app.head.link = nuxt.options.app.head.link.filter((link) => !link.key || !oldIcons.cdn.some(([key]) => link.key === key));
+  if (!reload) {
+    const oldIcons = ctx.icons;
+    if (oldIcons && oldIcons.cdn?.length && nuxt.options.app.head.link) {
+      nuxt.options.app.head.link = nuxt.options.app.head.link.filter((link) => !link.key || !oldIcons.cdn.some(([key]) => link.key === key));
+    }
   }
   ctx.moduleOptions = configuration.moduleOptions;
   ctx.vuetifyOptions = configuration.vuetifyOptions;
@@ -1582,7 +1597,7 @@ async function load(options, nuxt, ctx) {
   if (ctx.isSSR && !ctx.ssrClientHints.prefersColorScheme && ctx.vuetifyOptions.theme && typeof ctx.vuetifyOptions.theme === "object" && ctx.vuetifyOptions.theme.defaultTheme === "system") {
     ctx.logger.warn('`theme.defaultTheme: "system"` cannot be resolved during SSR/SSG: the server has no access to the OS color-scheme preference, so the first paint defaults to light and may flash on dark systems. Set explicit dark/light themes and enable `moduleOptions.ssrClientHints.prefersColorScheme` (optionally `prefersColorSchemeOptions.useBrowserThemeOnly`). See the SSR guide.');
   }
-  if (ctx.icons.enabled) {
+  if (!reload && ctx.icons.enabled) {
     if (ctx.icons.local) {
       for (const css of ctx.icons.local) {
         nuxt.options.css.push(css);
@@ -1602,43 +1617,67 @@ async function load(options, nuxt, ctx) {
     }
   }
 }
-function registerWatcher(options, nuxt, ctx) {
-  if (nuxt.options.dev) {
-    let pageReload;
-    nuxt.hooks.hook("builder:watch", (_event, path) => {
-      path = relative(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
-      if (!pageReload && ctx.vuetifyFilesToWatch.includes(path)) {
-        return nuxt.callHook("restart");
+function bindInvalidator(graph) {
+  return () => {
+    for (const id of RESOLVED_VIRTUAL_MODULES) {
+      const mod = graph.getModuleById(id);
+      if (mod) {
+        graph.invalidateModule(mod);
       }
-    });
-    nuxt.hook("vite:serverCreated", (server, { isClient }) => {
-      if (!server.ws || !isClient) {
-        return;
-      }
-      pageReload = debounce(async () => {
-        const modules = [];
-        for (const v of RESOLVED_VIRTUAL_MODULES) {
-          const module = server.moduleGraph.getModuleById(v);
-          if (module) {
-            modules.push(module);
-          }
-        }
-        await load(options, nuxt, ctx);
-        if (modules.length > 0) {
-          await Promise.all(modules.map((m) => server.reloadModule(m)));
-        }
-      }, 50, { trailing: false });
-    });
-    addVitePlugin({
-      name: "vuetify:configuration:watch",
-      enforce: "pre",
-      handleHotUpdate({ file }) {
-        if (pageReload && ctx.vuetifyFilesToWatch.includes(file)) {
-          return pageReload();
-        }
+    }
+  };
+}
+function registerWatcher(options, nuxt, ctx) {
+  if (!nuxt.options.dev) {
+    return;
+  }
+  if (!ctx.canHmrConfig) {
+    for (const file of ctx.vuetifyFilesToWatch) {
+      nuxt.options.watch.push(file);
+    }
+    return;
+  }
+  let clientServer;
+  let invalidateSsrModules;
+  nuxt.hook("vite:serverCreated", (server, { isClient }) => {
+    if (!isClient) {
+      invalidateSsrModules = bindInvalidator(server.moduleGraph);
+      return;
+    }
+    if (!server.ws) {
+      return;
+    }
+    clientServer = server;
+    const ssrEnv = server.environments?.ssr;
+    if (ssrEnv) {
+      invalidateSsrModules ??= bindInvalidator(ssrEnv.moduleGraph);
+    }
+    server.watcher.add(ctx.vuetifyFilesToWatch);
+  });
+  async function reloadConfig() {
+    await load(options, nuxt, ctx, true);
+    invalidateSsrModules?.();
+    clientServer?.ws.send({ type: "full-reload" });
+  }
+  addVitePlugin({
+    name: "vuetify:configuration:watch",
+    enforce: "pre",
+    async handleHotUpdate({ file }) {
+      if (clientServer && ctx.vuetifyFilesToWatch.includes(file)) {
+        await reloadConfig();
+        return [];
       }
-    });
+    }
+  });
+}
+
+const MIN_NUXT_VERSION_FOR_SSR_CONFIG_HMR = "3.18.0";
+function supportsSsrConfigHmr(nuxtVersion) {
+  const parsed = semver.parse(nuxtVersion) ?? semver.coerce(nuxtVersion);
+  if (!parsed) {
+    return false;
   }
+  return semver.gte(parsed.version, MIN_NUXT_VERSION_FOR_SSR_CONFIG_HMR);
 }
 
 const CONFIG_KEY = "vuetify";
@@ -1687,6 +1726,7 @@ const module$1 = defineNuxtModule({
       moduleOptions: void 0,
       vuetifyOptions: void 0,
       vuetifyFilesToWatch: [],
+      canHmrConfig: !nuxt.options.ssr || supportsSsrConfigHmr(getNuxtVersion(nuxt)),
       isSSR: nuxt.options.ssr,
       isDev: nuxt.options.dev,
       isNuxtGenerate: !!nuxt.options.nitro.static,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "1.0.0-beta.10",
+  "version": "1.0.0-beta.11",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -54,7 +54,7 @@
     "@nuxt/kit": "^4.3.1",
     "@vuetify/loader-shared": "^2.1.2",
     "@vuetify/unplugin-styles": "^1.0.0-beta.11",
-    "defu": "^6.1.4",
+    "defu": "^6.1.7",
     "local-pkg": "^1.1.2",
     "pathe": "^2.0.3",
     "perfect-debounce": "^2.1.0",
@@ -93,7 +93,7 @@
     "rimraf": "^6.1.3",
     "sass": "^1.97.3",
     "typescript": "^5.9.3",
-    "vite": "7.3.1",
+    "vite": "7.3.5",
     "vitest": "^4.0.18",
     "vue-tsc": "^3.2.5",
     "vuetify": "^4.0.1"