vuetify-nuxt-module 1.0.0-beta.8 → 1.0.0-rc.1

package/README.md

@@ -26,32 +26,29 @@
 
 ## 🚀 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
 
 > Requires Vite, will not work with Webpack
 
+`vuetify` is a peer dependency (Vuetify 3 or 4) — install it alongside the module:
+
 ```bash
+npm install -D vuetify
 npx nuxt module add vuetify-nuxt-module
 ```
 

package/dist/module.d.mts

@@ -26,8 +26,13 @@ interface DateOptions {
     adapter?: DateAdapter;
     /**
      * Formats.
+     *
+     * Only serializable `Intl.DateTimeFormatOptions` values are supported here:
+     * the date configuration is statically serialized to a virtual module, so
+     * function-valued formats cannot be expressed (see #313, #331). Use a custom
+     * date adapter if you need function formats.
      */
-    formats?: Record<string, string>;
+    formats?: Record<string, Intl.DateTimeFormatOptions>;
     /**
      * Locales.
      *

package/dist/module.json

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

package/dist/module.mjs

@@ -1,22 +1,19 @@
 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';
-import { transformAssetUrls } from 'vite-plugin-vuetify';
+import { transformAssetUrls, generateImports } from '@vuetify/loader-shared';
 import Styles from '@vuetify/unplugin-styles/vite';
 import { isPackageExists } from 'local-pkg';
-import { generateImports } from '@vuetify/loader-shared';
-import destr from 'destr';
 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.8";
+const version = "1.0.0-rc.1";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -356,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,
@@ -377,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() {
@@ -596,6 +603,70 @@ ${useLocales.map((locale) => {
   };
 }
 
+const VUETIFY_TO_DATE_FNS = {
+  en: "enUS",
+  fa: "faIR",
+  no: "nb",
+  srCyrl: "sr",
+  zhHans: "zhCN",
+  zhHant: "zhTW"
+};
+const DATE_FNS_SUPPORTED = /* @__PURE__ */ new Set([
+  "af",
+  "ar",
+  "az",
+  "bg",
+  "ca",
+  "ckb",
+  "cs",
+  "da",
+  "de",
+  "el",
+  "enUS",
+  "es",
+  "et",
+  "faIR",
+  "fi",
+  "fr",
+  "he",
+  "hr",
+  "hu",
+  "id",
+  "it",
+  "ja",
+  "km",
+  "ko",
+  "lt",
+  "lv",
+  "nb",
+  "nl",
+  "pl",
+  "pt",
+  "ro",
+  "ru",
+  "sk",
+  "sl",
+  "sr",
+  "srLatn",
+  "sv",
+  "th",
+  "tr",
+  "uk",
+  "vi",
+  "zhCN",
+  "zhTW"
+]);
+function resolveDateFnsLocaleName(code) {
+  if (!code) {
+    return { name: "enUS", fallback: true };
+  }
+  const candidate = VUETIFY_TO_DATE_FNS[code] ?? code;
+  if (DATE_FNS_SUPPORTED.has(candidate)) {
+    return { name: candidate, fallback: false };
+  }
+  return { name: "enUS", fallback: true };
+}
+
 function vuetifyDateConfigurationPlugin(ctx) {
   return {
     name: "vuetify:date-configuration:nuxt",
@@ -607,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
@@ -619,34 +695,41 @@ export function dateConfiguration() {
 `;
         }
         const { adapter: _adapter, ...newDateOptions } = ctx.vuetifyOptions.date ?? {};
-        return `${buildImports()}
+        let dateFnsLocale;
+        if (ctx.dateAdapter === "date-fns") {
+          const resolved = resolveDateFnsLocaleName(ctx.vuetifyOptions.locale?.locale);
+          dateFnsLocale = resolved.name;
+          if (resolved.fallback) {
+            ctx.logger.warn(`[vuetify-nuxt-module] date-fns locale for "${ctx.vuetifyOptions.locale?.locale ?? "(unset)"}" not found, falling back to "enUS". Set "vuetifyOptions.locale.locale" to a supported locale.`);
+          }
+        }
+        return `${buildImports(dateFnsLocale)}
 export const enabled = true
 export const isDev = ${ctx.isDev}
 export const i18n = ${ctx.i18n}
 export const adapter = '${ctx.dateAdapter}'
 export function dateConfiguration() {
   const options = JSON.parse('${JSON.stringify(newDateOptions)}')
-  ${buildAdapter()}
+  ${buildAdapter(dateFnsLocale)}
   return options
 }
 `;
       }
     }
   };
-  function buildAdapter() {
+  function buildAdapter(dateFnsLocale) {
     if (ctx.dateAdapter === "custom" || ctx.dateAdapter === "vuetify" && ctx.vuetifyGte("3.4.0")) {
       return "";
     }
     if (ctx.dateAdapter === "vuetify") {
       return "options.adapter = VuetifyDateAdapter";
     }
-    const locale = ctx.vuetifyOptions.locale?.locale ?? "en";
     if (ctx.dateAdapter === "date-fns") {
-      return `options.adapter = new Adapter({ locale: ${locale} })`;
+      return `options.adapter = new Adapter({ locale: ${dateFnsLocale} })`;
     }
     return "options.adapter = Adapter";
   }
-  function buildImports() {
+  function buildImports(dateFnsLocale) {
     if (ctx.dateAdapter === "custom" || ctx.dateAdapter === "vuetify" && ctx.vuetifyGte("3.4.0")) {
       return "";
     }
@@ -655,7 +738,7 @@ export function dateConfiguration() {
     }
     const imports = [`import Adapter from '@date-io/${ctx.dateAdapter}'`];
     if (ctx.dateAdapter === "date-fns") {
-      imports.push(`import { ${ctx.vuetifyOptions.locale?.locale ?? "en"} } from 'date-fns/locale'`);
+      imports.push(`import { ${dateFnsLocale} } from 'date-fns/locale'`);
     }
     return imports.join("\n");
   }
@@ -672,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,
@@ -841,10 +929,24 @@ function parseId2(id) {
   id = id.replace(/^(virtual:nuxt:|virtual:)/, "");
   return parseURL(decodeURIComponent(isAbsolute(id) ? pathToFileURL(id).href : id));
 }
+function reviver(key, value) {
+  if (key === "__proto__" || key === "constructor") {
+    return void 0;
+  }
+  return value;
+}
+function parseProps(value) {
+  try {
+    const parsed = JSON.parse(value, reviver);
+    return parsed && typeof parsed === "object" ? parsed : void 0;
+  } catch {
+    return void 0;
+  }
+}
 function parseId(id) {
   const { search, pathname } = parseId2(id);
   const query = parseQuery(search);
-  const urlProps = query.props ? destr(query.props) : void 0;
+  const urlProps = query.props ? parseProps(query.props) : void 0;
   return {
     query: urlProps,
     path: pathname ?? id
@@ -1266,6 +1368,29 @@ async function loadVuetifyConfiguration(cwd = process.cwd(), configOrPath = cwd,
   return result;
 }
 
+const MODULE_DEFAULTS = {
+  moduleOptions: {
+    importComposables: true,
+    includeTransformAssetsUrls: true,
+    styles: true,
+    rulesConfiguration: {
+      fromLabs: true
+    }
+  },
+  vuetifyOptions: {
+    labComponents: false,
+    directives: false
+  }
+};
+function finalizeConfiguration(moduleOptions) {
+  if (moduleOptions.length > 1) {
+    const [app, ...rest] = moduleOptions;
+    const configuration = defu(app, ...rest, MODULE_DEFAULTS);
+    dedupeIcons(configuration, moduleOptions.toReversed());
+    return configuration;
+  }
+  return defu(moduleOptions[0] ?? {}, MODULE_DEFAULTS);
+}
 async function mergeVuetifyModules(options, nuxt) {
   const moduleOptions = [];
   const vuetifyConfigurationFilesToWatch = /* @__PURE__ */ new Set();
@@ -1293,37 +1418,18 @@ 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({
     moduleOptions: options.moduleOptions,
     vuetifyOptions: resolvedOptions.config
   });
-  if (moduleOptions.length > 1) {
-    const [app, ...rest] = moduleOptions;
-    const configuration = defu(app, ...rest);
-    dedupeIcons(configuration, moduleOptions.toReversed());
-    return {
-      configuration,
-      vuetifyConfigurationFilesToWatch
-    };
-  } else {
-    return {
-      configuration: {
-        moduleOptions: options.moduleOptions,
-        vuetifyOptions: resolvedOptions.config
-      },
-      vuetifyConfigurationFilesToWatch
-    };
-  }
+  return {
+    configuration: finalizeConfiguration(moduleOptions),
+    vuetifyConfigurationFilesToWatch
+  };
 }
 function dedupeIcons(configuration, moduleOptions) {
   const vuetifyOptions = configuration.vuetifyOptions;
@@ -1368,6 +1474,16 @@ function resolveColorSchemeCookie(options, logger) {
     cookieSameSite
   };
 }
+function resolveDefaultTheme(defaultTheme, themes, lightThemeName, logger) {
+  if (defaultTheme === "system") {
+    logger.warn(`Vuetify "system" theme cannot be resolved during SSR; using "${lightThemeName}" as the server-side fallback. The browser preference is applied on the client via prefersColorScheme client hints. To avoid a flash of the wrong theme, set explicit dark/light themes and enable moduleOptions.ssrClientHints.prefersColorSchemeOptions.useBrowserThemeOnly.`);
+    return lightThemeName;
+  }
+  if (!themes[defaultTheme]) {
+    throw new Error(`Missing default theme ${defaultTheme} in the Vuetify themes!`);
+  }
+  return defaultTheme;
+}
 function prepareSSRClientHints(baseUrl, ctx) {
   if (!ctx.isSSR || ctx.isNuxtGenerate) {
     return disabledClientHints;
@@ -1394,9 +1510,6 @@ function prepareSSRClientHints(baseUrl, ctx) {
     if (!defaultTheme) {
       throw new Error("Vuetify default theme is missing in theme!");
     }
-    if (!themes[defaultTheme]) {
-      throw new Error(`Missing default theme ${defaultTheme} in the Vuetify themes!`);
-    }
     const darkThemeName = ssrClientHintsConfiguration.prefersColorSchemeOptions?.darkThemeName ?? "dark";
     if (!themes[darkThemeName]) {
       throw new Error(`Missing theme ${darkThemeName} in the Vuetify themes!`);
@@ -1409,9 +1522,10 @@ function prepareSSRClientHints(baseUrl, ctx) {
       throw new Error("Vuetify dark theme and light theme are the same, change darkThemeName or lightThemeName!");
     }
     const pcsOptions = ssrClientHintsConfiguration.prefersColorSchemeOptions;
+    const effectiveDefaultTheme = resolveDefaultTheme(defaultTheme, themes, lightThemeName, ctx.logger);
     clientHints.prefersColorSchemeOptions = {
       baseUrl,
-      defaultTheme,
+      defaultTheme: effectiveDefaultTheme,
       themeNames: Array.from(Object.keys(themes)),
       ...resolveColorSchemeCookie(pcsOptions, ctx.logger),
       darkThemeName,
@@ -1422,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
@@ -1467,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;
@@ -1478,7 +1594,10 @@ async function load(options, nuxt, ctx) {
   ctx.vuetifyFilesToWatch = Array.from(vuetifyConfigurationFilesToWatch);
   ctx.icons = prepareIcons(ctx.unocss, ctx.logger, vuetifyAppOptions, ctx.resolvePaths);
   ctx.ssrClientHints = prepareSSRClientHints(nuxt.options.app.baseURL ?? "/", ctx);
-  if (ctx.icons.enabled) {
+  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 (!reload && ctx.icons.enabled) {
     if (ctx.icons.local) {
       for (const css of ctx.icons.local) {
         nuxt.options.css.push(css);
@@ -1498,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";
@@ -1548,24 +1691,6 @@ const module$1 = defineNuxtModule({
     },
     version
   },
-  /**
-   * Default configuration options of the Nuxt module
-   */
-  defaults: () => ({
-    vuetifyOptions: {
-      labComponents: false,
-      directives: false
-    },
-    moduleOptions: {
-      importComposables: true,
-      includeTransformAssetsUrls: true,
-      styles: true,
-      disableVuetifyStyles: false,
-      rulesConfiguration: {
-        fromLabs: true
-      }
-    }
-  }),
   /**
    * Sets up the Vuetify Nuxt module.
    *
@@ -1601,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/dist/runtime/plugins/first-request-reload-guard.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Session cookie marking that the one-time `reloadOnFirstRequest` reload has
+ * already happened this browser session. Prevents an infinite reload loop when
+ * a browser requests client hints but never delivers them (e.g. Brave Shields
+ * strip `Sec-CH-*`), since `firstRequest` would otherwise stay `true` forever (#334).
+ */
+export declare const RELOAD_GUARD_COOKIE = "vuetify-nuxt-client-hints-reloaded";
+/** True when the guard cookie is present in a `document.cookie` string. */
+export declare function hasReloadGuardCookie(cookie: string): boolean;
+/** Build a session guard cookie (no expiry → cleared on browser close). */
+export declare function buildReloadGuardCookie(path: string): string;
+/** Whether to perform the first-request reload: only once per session. */
+export declare function shouldReloadOnFirstRequest(firstRequest: boolean, reloadOnFirstRequest: boolean, alreadyReloaded: boolean): boolean;

package/dist/runtime/plugins/first-request-reload-guard.js

@@ -0,0 +1,11 @@
+export const RELOAD_GUARD_COOKIE = "vuetify-nuxt-client-hints-reloaded";
+export function hasReloadGuardCookie(cookie) {
+  const prefix = `${RELOAD_GUARD_COOKIE}=`;
+  return cookie.split(";").some((c) => c.trim().startsWith(prefix));
+}
+export function buildReloadGuardCookie(path) {
+  return `${RELOAD_GUARD_COOKIE}=1; Path=${path}; SameSite=Lax`;
+}
+export function shouldReloadOnFirstRequest(firstRequest, reloadOnFirstRequest, alreadyReloaded) {
+  return firstRequest && reloadOnFirstRequest && !alreadyReloaded;
+}

package/dist/runtime/plugins/vuetify-client-hints.client.js

@@ -2,6 +2,7 @@ import { defineNuxtPlugin, useNuxtApp, useState } from "#imports";
 import { ssrClientHintsConfiguration } from "virtual:vuetify-ssr-client-hints-configuration";
 import { reactive, ref, watch } from "vue";
 import { VuetifyHTTPClientHints } from "./client-hints.js";
+import { buildReloadGuardCookie, hasReloadGuardCookie, shouldReloadOnFirstRequest } from "./first-request-reload-guard.js";
 const plugin = defineNuxtPlugin({
   name: "vuetify:client-hints:client:plugin",
   order: -25,
@@ -22,7 +23,11 @@ const plugin = defineNuxtPlugin({
       prefersColorScheme,
       prefersColorSchemeOptions
     } = ssrClientHintsConfiguration;
-    if (firstRequest && reloadOnFirstRequest) {
+    if (shouldReloadOnFirstRequest(firstRequest, reloadOnFirstRequest, hasReloadGuardCookie(document.cookie))) {
+      const markAndReload = () => {
+        document.cookie = buildReloadGuardCookie(prefersColorSchemeOptions?.baseUrl ?? "/");
+        window.location.reload();
+      };
       if (prefersColorScheme) {
         const themeCookie = state.value.colorSchemeCookie;
         if (prefersColorSchemeOptions && themeCookie) {
@@ -32,19 +37,19 @@ const plugin = defineNuxtPlugin({
           const cookieEntry = `${parseCookieName}${state.value.colorSchemeFromCookie ?? prefersColorSchemeOptions.defaultTheme};`;
           const newThemeName = prefersDark ? prefersColorSchemeOptions.darkThemeName : prefersColorSchemeOptions.lightThemeName;
           document.cookie = themeCookie.replace(cookieEntry, `${cookieName}=${newThemeName};`);
-          window.location.reload();
+          markAndReload();
         } else if (prefersColorSchemeAvailable) {
-          window.location.reload();
+          markAndReload();
         }
       }
       if (prefersReducedMotion && prefersReducedMotionAvailable) {
-        window.location.reload();
+        markAndReload();
       }
       if (viewportSize && viewportHeightAvailable) {
-        window.location.reload();
+        markAndReload();
       }
       if (viewportSize && viewportWidthAvailable) {
-        window.location.reload();
+        markAndReload();
       }
     }
     nuxtApp.hook("vuetify:before-create", ({ vuetifyOptions }) => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "1.0.0-beta.8",
+  "version": "1.0.0-rc.1",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -51,50 +51,52 @@
     "*.mjs"
   ],
   "dependencies": {
-    "@nuxt/kit": "^4.3.1",
+    "@nuxt/kit": "^4.4.8",
+    "@vuetify/loader-shared": "^2.1.2",
     "@vuetify/unplugin-styles": "^1.0.0-beta.11",
-    "defu": "^6.1.4",
-    "destr": "^2.0.5",
-    "local-pkg": "^1.1.2",
+    "defu": "^6.1.7",
+    "local-pkg": "^1.2.1",
     "pathe": "^2.0.3",
     "perfect-debounce": "^2.1.0",
-    "semver": "^7.7.4",
-    "ufo": "^1.6.3",
-    "unconfig": "^7.5.0",
-    "vite-plugin-vuetify": "^2.1.3",
-    "vuetify": "^4.0.1"
+    "semver": "^7.8.4",
+    "ufo": "^1.6.4",
+    "unconfig": "^7.5.0"
+  },
+  "peerDependencies": {
+    "vuetify": "^3.4.0 || ^4.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^7.6.1",
-    "@antfu/ni": "^28.2.0",
+    "@antfu/eslint-config": "^7.7.3",
+    "@antfu/ni": "^28.3.0",
     "@date-io/luxon": "^3.2.0",
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/free-solid-svg-icons": "^7.2.0",
-    "@fortawesome/vue-fontawesome": "^3.1.3",
-    "@iconify-json/carbon": "^1.2.19",
+    "@fortawesome/vue-fontawesome": "^3.2.0",
+    "@iconify-json/carbon": "^1.2.23",
     "@iconify-json/mdi": "^1.2.3",
     "@mdi/js": "^7.4.47",
     "@nuxt/devtools": "latest",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.3.1",
-    "@nuxt/test-utils": "^4.0.0",
-    "@nuxtjs/i18n": "^10.2.3",
+    "@nuxt/schema": "^4.4.8",
+    "@nuxt/test-utils": "^4.0.3",
+    "@nuxtjs/i18n": "^10.4.0",
     "@parcel/watcher": "^2.5.6",
-    "@types/node": "^25.3.3",
+    "@types/node": "^25.9.3",
     "@types/semver": "^7.7.1",
-    "@unocss/nuxt": "^66.6.5",
-    "bumpp": "^10.4.1",
-    "eslint": "^10.0.2",
+    "@unocss/nuxt": "^66.7.2",
+    "bumpp": "^11.1.0",
+    "eslint": "^10.5.0",
     "luxon": "^3.7.2",
-    "nuxt": "^4.3.1",
-    "playwright-core": "^1.58.0",
-    "publint": "^0.3.18",
+    "nuxt": "^4.4.8",
+    "playwright-core": "^1.61.0",
+    "publint": "^0.3.21",
     "rimraf": "^6.1.3",
-    "sass": "^1.97.3",
+    "sass": "^1.101.0",
     "typescript": "^5.9.3",
-    "vite": "7.3.1",
-    "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.5"
+    "vite": "7.3.5",
+    "vitest": "^4.1.9",
+    "vue-tsc": "^3.3.5",
+    "vuetify": "^4.1.2"
   },
   "build": {
     "externals": [
@@ -103,7 +105,6 @@
       "node:child_process",
       "node:fs",
       "consola",
-      "destr",
       "esbuild",
       "local-pkg",
       "pathe",
@@ -114,7 +115,6 @@
       "ufo",
       "unconfig",
       "vite",
-      "vite-plugin-vuetify",
       "vuetify"
     ]
   },