vuetify-nuxt-module 1.0.0-beta.8 → 1.0.0-beta.9

package/README.md

@@ -51,7 +51,10 @@
 
 > 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-beta.9",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -5,10 +5,9 @@ import { isAbsolute, resolve, dirname, relative } 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';
@@ -16,7 +15,7 @@ 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-beta.9";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -596,6 +595,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",
@@ -619,34 +682,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 +725,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");
   }
@@ -1266,6 +1336,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();
@@ -1307,23 +1400,10 @@ async function mergeVuetifyModules(options, nuxt) {
     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 +1448,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 +1484,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 +1496,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,
@@ -1478,6 +1566,9 @@ 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.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 (ctx.icons.local) {
       for (const css of ctx.icons.local) {
@@ -1548,24 +1639,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.
    *

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-beta.9",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -52,6 +52,7 @@
   ],
   "dependencies": {
     "@nuxt/kit": "^4.3.1",
+    "@vuetify/loader-shared": "^2.1.2",
     "@vuetify/unplugin-styles": "^1.0.0-beta.11",
     "defu": "^6.1.4",
     "destr": "^2.0.5",
@@ -60,9 +61,10 @@
     "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"
+    "unconfig": "^7.5.0"
+  },
+  "peerDependencies": {
+    "vuetify": "^3.4.0 || ^4.0.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^7.6.1",
@@ -94,7 +96,8 @@
     "typescript": "^5.9.3",
     "vite": "7.3.1",
     "vitest": "^4.0.18",
-    "vue-tsc": "^3.2.5"
+    "vue-tsc": "^3.2.5",
+    "vuetify": "^4.0.1"
   },
   "build": {
     "externals": [
@@ -114,7 +117,6 @@
       "ufo",
       "unconfig",
       "vite",
-      "vite-plugin-vuetify",
       "vuetify"
     ]
   },