vuetify-nuxt-module 0.17.1 → 0.18.1

package/dist/module.d.mts

@@ -247,6 +247,15 @@ interface MOptions {
     styles?: true | 'none' | 'sass' | {
         configFile: string;
     };
+    /**
+     * The module will add `vuetify/styles` in Nuxt `css` by default.
+     *
+     * If you want to add custom styles, you should enable this flag to avoid registering `vuetify/styles`.
+     *
+     * @see https://github.com/vuetifyjs/nuxt-module/pull/213
+     * @default false
+     */
+    disableVuetifyStyles?: boolean;
     /**
      * Disable the modern SASS compiler and API.
      *
@@ -413,8 +422,6 @@ interface SSRClientHintsConfiguration {
     };
 }
 
-declare const _default: _nuxt_schema.NuxtModule<VuetifyModuleOptions>;
-
 interface ModuleOptions extends VuetifyModuleOptions {
 }
 interface ModuleHooks {
@@ -436,34 +443,6 @@ interface ModuleRuntimeHooks {
         ssrClientHintsConfiguration: SSRClientHintsConfiguration;
     }) => HookResult;
 }
-declare module '#app' {
-    interface ModuleRuntimeHooks {
-        'vuetify:configuration': (options: {
-            isDev: boolean;
-            vuetifyOptions: VuetifyOptions;
-        }) => HookResult;
-        'vuetify:before-create': (options: {
-            isDev: boolean;
-            vuetifyOptions: VuetifyOptions;
-        }) => HookResult;
-        'vuetify:ready': (vuetify: ReturnType<typeof createVuetify>) => HookResult;
-        'vuetify:ssr-client-hints': (options: {
-            vuetifyOptions: VuetifyOptions;
-            ssrClientHints: SSRClientHints;
-            ssrClientHintsConfiguration: SSRClientHintsConfiguration;
-        }) => HookResult;
-    }
-}
-declare module '@nuxt/schema' {
-    interface NuxtConfig {
-        ['vuetify']?: Partial<ModuleOptions>;
-    }
-    interface NuxtOptions {
-        ['vuetify']?: ModuleOptions;
-    }
-    interface NuxtHooks {
-        'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
-    }
-}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 export { type ComponentName, type Components, type DateAdapter, type DateOptions, type DirectiveName, type Directives, type ExternalVuetifyOptions, type FontAwesomeSvgIconSet, type FontIconSet, type IconFontName, type IconSetName, type IconsOptions, type InlineModuleOptions, type JSSVGIconSet, type LabComponentName, type LabComponents, type MOptions, type ModuleHooks, type ModuleOptions, type ModuleRuntimeHooks, type SSRClientHints, type SSRClientHintsConfiguration, type UnoCCSMdiIconSet, type VOptions, type VuetifyLocale, type VuetifyModuleOptions, _default as default };

package/dist/module.d.ts

@@ -247,6 +247,15 @@ interface MOptions {
     styles?: true | 'none' | 'sass' | {
         configFile: string;
     };
+    /**
+     * The module will add `vuetify/styles` in Nuxt `css` by default.
+     *
+     * If you want to add custom styles, you should enable this flag to avoid registering `vuetify/styles`.
+     *
+     * @see https://github.com/vuetifyjs/nuxt-module/pull/213
+     * @default false
+     */
+    disableVuetifyStyles?: boolean;
     /**
      * Disable the modern SASS compiler and API.
      *
@@ -413,8 +422,6 @@ interface SSRClientHintsConfiguration {
     };
 }
 
-declare const _default: _nuxt_schema.NuxtModule<VuetifyModuleOptions>;
-
 interface ModuleOptions extends VuetifyModuleOptions {
 }
 interface ModuleHooks {
@@ -436,34 +443,6 @@ interface ModuleRuntimeHooks {
         ssrClientHintsConfiguration: SSRClientHintsConfiguration;
     }) => HookResult;
 }
-declare module '#app' {
-    interface ModuleRuntimeHooks {
-        'vuetify:configuration': (options: {
-            isDev: boolean;
-            vuetifyOptions: VuetifyOptions;
-        }) => HookResult;
-        'vuetify:before-create': (options: {
-            isDev: boolean;
-            vuetifyOptions: VuetifyOptions;
-        }) => HookResult;
-        'vuetify:ready': (vuetify: ReturnType<typeof createVuetify>) => HookResult;
-        'vuetify:ssr-client-hints': (options: {
-            vuetifyOptions: VuetifyOptions;
-            ssrClientHints: SSRClientHints;
-            ssrClientHintsConfiguration: SSRClientHintsConfiguration;
-        }) => HookResult;
-    }
-}
-declare module '@nuxt/schema' {
-    interface NuxtConfig {
-        ['vuetify']?: Partial<ModuleOptions>;
-    }
-    interface NuxtOptions {
-        ['vuetify']?: ModuleOptions;
-    }
-    interface NuxtHooks {
-        'vuetify:registerModule': (registerModule: (config: InlineModuleOptions) => void) => HookResult;
-    }
-}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
 export { type ComponentName, type Components, type DateAdapter, type DateOptions, type DirectiveName, type Directives, type ExternalVuetifyOptions, type FontAwesomeSvgIconSet, type FontIconSet, type IconFontName, type IconSetName, type IconsOptions, type InlineModuleOptions, type JSSVGIconSet, type LabComponentName, type LabComponents, type MOptions, type ModuleHooks, type ModuleOptions, type ModuleRuntimeHooks, type SSRClientHints, type SSRClientHintsConfiguration, type UnoCCSMdiIconSet, type VOptions, type VuetifyLocale, type VuetifyModuleOptions, _default as default };

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.9.0",
     "bridge": false
   },
-  "version": "0.17.1",
+  "version": "0.18.1",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,20 +1,22 @@
-import { addVitePlugin, addPluginTemplate, extendWebpackConfig, addImports, addPlugin, useLogger, defineNuxtModule, isNuxt2, getNuxtVersion, createResolver, hasNuxtModule } from '@nuxt/kit';
+import { addVitePlugin, addPluginTemplate, getNuxtVersion, extendWebpackConfig, addImports, addPlugin, useLogger, defineNuxtModule, isNuxt2, createResolver, hasNuxtModule } from '@nuxt/kit';
 import { isPackageExists, getPackageInfo } from 'local-pkg';
-import { resolve, dirname, relative, extname } from 'node:path';
+import { createFilter, version as version$1 } from 'vite';
+import { resolve, dirname, relative } from 'node:path';
 import defu from 'defu';
 import { debounce } from 'perfect-debounce';
 import { existsSync, statSync } from 'node:fs';
 import process from 'node:process';
 import { createConfigLoader } from 'unconfig';
 import { readFile } from 'node:fs/promises';
-import { resolveVuetifyBase, normalizePath, generateImports } from '@vuetify/loader-shared';
-import { isAbsolute, join, relative as relative$1 } from 'pathe';
-import { transformAssetUrls } from 'vite-plugin-vuetify';
+import { resolveVuetifyBase, isObject, normalizePath, generateImports } from '@vuetify/loader-shared';
 import { pathToFileURL } from 'node:url';
+import { relative as relative$1, isAbsolute } from 'pathe';
+import path from 'upath';
+import { transformAssetUrls } from 'vite-plugin-vuetify';
 import { parseQuery, parseURL } from 'ufo';
 import destr from 'destr';
 
-const version = "0.17.1";
+const version = "0.18.1";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -525,63 +527,74 @@ function registerWatcher(options, nuxt, ctx) {
   }
 }
 
-function isSubdir(root, test) {
-  const relative = relative$1(root, test);
-  return relative && !relative.startsWith("..") && !isAbsolute(relative);
-}
-function vuetifyStylesPlugin(options, _logger) {
-  const vuetifyBase = resolveVuetifyBase();
+function vuetifyStylesPlugin(options, [major, minor, patch], _logger) {
   let configFile;
-  const tempFiles = /* @__PURE__ */ new Map();
+  const vuetifyBase = resolveVuetifyBase();
+  const noneFiles = /* @__PURE__ */ new Set();
+  let isNone = false;
+  let sassVariables = false;
+  let fileImport = false;
+  const PREFIX = "vuetify-styles/";
+  const SSR_PREFIX = `/@${PREFIX}`;
   return {
     name: "vuetify:styles:nuxt",
     enforce: "pre",
     configResolved(config) {
       if (config.plugins.findIndex((plugin) => plugin.name === "vuetify:styles") > -1)
         throw new Error("Remove vite-plugin-vuetify from your Nuxt config file, this module registers a modified version.");
-      if (typeof options.styles === "object") {
-        if (isAbsolute(options.styles.configFile))
-          configFile = options.styles.configFile;
+      if (isObject(options.styles)) {
+        sassVariables = true;
+        fileImport = major > 5 || major === 5 && minor > 4 || major === 5 && minor === 4 && patch > 2;
+        if (path.isAbsolute(options.styles.configFile))
+          configFile = path.resolve(options.styles.configFile);
         else
-          configFile = join(config.root || process.cwd(), options.styles.configFile);
+          configFile = path.resolve(path.join(config.root || process.cwd(), options.styles.configFile));
+        configFile = fileImport ? pathToFileURL(configFile).href : normalizePath(configFile);
+      } else {
+        isNone = options.styles === "none";
       }
     },
     async resolveId(source, importer, { custom, ssr }) {
-      if (source === "vuetify/styles" || importer && source.endsWith(".css") && isSubdir(vuetifyBase, isAbsolute(source) ? source : importer)) {
-        if (options.styles === "none") {
-          return "/@plugin-vuetify/lib/__void__";
-        } else if (options.styles === "sass") {
-          const target = source.replace(/\.css$/, ".sass");
-          return this.resolve(target, importer, { skipSelf: true, custom });
-        } else if (typeof options.styles === "object") {
-          const resolution = await this.resolve(source, importer, { skipSelf: true, custom });
-          if (!resolution)
-            return null;
-          const target = resolution.id.replace(/\.css$/, ".sass");
-          const file = relative$1(join(vuetifyBase, "lib"), target);
-          const contents = `@use "${normalizePath(configFile)}"
-@use "${normalizePath(target)}"`;
-          tempFiles.set(file, contents);
-          return ssr ? `/@plugin-vuetify/lib/${file}` : `/@fs/plugin-vuetify/lib/${file}`;
+      if (source.startsWith(PREFIX) || source.startsWith(SSR_PREFIX))
+        return source;
+      if (source === "vuetify/styles" || importer && source.endsWith(".css") && isSubdir(vuetifyBase, path.isAbsolute(source) ? source : importer)) {
+        if (options.styles === "sass") {
+          const target2 = source.replace(/\.css$/, ".sass");
+          return this.resolve(target2, importer, { skipSelf: true, custom });
         }
+        const resolution = await this.resolve(source, importer, { skipSelf: true, custom });
+        if (!resolution)
+          return void 0;
+        const target = resolution.id.replace(/\.css$/, ".sass");
+        if (isNone) {
+          noneFiles.add(target);
+          return target;
+        }
+        return `${ssr ? SSR_PREFIX : PREFIX}${path.relative(vuetifyBase, target)}`;
       }
+      return void 0;
     },
     load(id) {
-      if (/^\/@plugin-vuetify\/lib\/__void__(\?.*)?$/.test(id))
-        return "";
-      if (id.startsWith("/@plugin-vuetify/lib/")) {
-        const file = /^\/@plugin-vuetify\/lib\/(.*?)(\?.*)?$/.exec(id)[1];
-        return tempFiles.get(file);
-      }
-      if (id.startsWith("/@fs/plugin-vuetify/lib/")) {
-        const file = /^\/@fs\/plugin-vuetify\/lib\/(.*?)(\?.*)?$/.exec(id)[1];
-        return tempFiles.get(file);
+      if (sassVariables) {
+        const target = id.startsWith(PREFIX) ? path.resolve(vuetifyBase, id.slice(PREFIX.length)) : id.startsWith(SSR_PREFIX) ? path.resolve(vuetifyBase, id.slice(SSR_PREFIX.length)) : void 0;
+        if (target) {
+          return {
+            code: `@use "${configFile}"
+@use "${fileImport ? pathToFileURL(target).href : normalizePath(target)}"`,
+            map: {
+              mappings: ""
+            }
+          };
+        }
       }
-      if (id.includes("plugin-vuetify/lib"))
-        return "";
+      return isNone && noneFiles.has(id) ? "" : void 0;
     }
   };
 }
+function isSubdir(root, test) {
+  const relative = relative$1(root, test);
+  return relative && !relative.startsWith("..") && !isAbsolute(relative);
+}
 
 function toKebabCase(str = "") {
   if (toKebabCase.cache.has(str))
@@ -1173,15 +1186,22 @@ function parseId(id) {
   };
 }
 function vuetifyImportPlugin(options) {
+  let filter;
   return {
     name: "vuetify:import:nuxt",
     configResolved(config) {
       if (config.plugins.findIndex((plugin) => plugin.name === "vuetify:import") > -1)
         throw new Error("Remove vite-plugin-vuetify from your Nuxt config file, this module registers a modified version.");
+      const vueIdx = config.plugins.findIndex((plugin) => plugin.name === "vite:vue");
+      const vueOptions = vueIdx > -1 ? config.plugins[vueIdx].api?.options : {};
+      filter = createFilter(vueOptions.include, vueOptions.exclude);
     },
     async transform(code, id) {
       const { query, path } = parseId(id);
-      if ((!query || !("vue" in query)) && extname(path) === ".vue" && !/^import { render as _sfc_render } from ".*"$/m.test(code) || query && "vue" in query && (query.type === "template" || query.type === "script" && query.setup === "true")) {
+      const isVueVirtual = query && "vue" in query;
+      const isVueFile = !isVueVirtual && filter(path) && !/^import { render as _sfc_render } from ".*"$/m.test(code);
+      const isVueTemplate = isVueVirtual && (query.type === "template" || query.type === "script" && query.setup === "true");
+      if (isVueFile || isVueTemplate) {
         const { code: imports, source } = generateImports(code, options);
         return {
           code: source + imports,
@@ -1199,7 +1219,7 @@ function configureVite(configKey, nuxt, ctx) {
     viteInlineConfig.plugins = viteInlineConfig.plugins || [];
     checkVuetifyPlugins(viteInlineConfig);
     viteInlineConfig.optimizeDeps = defu(viteInlineConfig.optimizeDeps, { exclude: ["vuetify"] });
-    if (nuxt.options.ssr) {
+    if (ctx.isSSR) {
       viteInlineConfig.ssr ||= {};
       viteInlineConfig.ssr.noExternal = [
         ...Array.isArray(viteInlineConfig.ssr.noExternal) ? viteInlineConfig.ssr.noExternal : viteInlineConfig.ssr.noExternal && typeof viteInlineConfig.ssr.noExternal !== "boolean" ? [viteInlineConfig.ssr.noExternal] : [],
@@ -1216,16 +1236,26 @@ function configureVite(configKey, nuxt, ctx) {
       viteInlineConfig.vue.template.transformAssetUrls = transformAssetUrls;
     }
     if (!ctx.moduleOptions.disableModernSassCompiler) {
-      viteInlineConfig.css ??= {};
-      viteInlineConfig.css.preprocessorOptions ??= {};
-      viteInlineConfig.css.preprocessorOptions.sass ??= {};
-      const sassEmbedded = isPackageExists("sass-embedded");
-      if (sassEmbedded) {
-        viteInlineConfig.css.preprocessorOptions.sass.api = "modern-compiler";
-      } else {
-        viteInlineConfig.css.preprocessorOptions.sass.api = "modern";
-        if (!("preprocessorMaxWorkers" in viteInlineConfig.css))
-          viteInlineConfig.css.preprocessorMaxWorkers = true;
+      const [major, minor, patch] = ctx.viteVersion;
+      const enableModernSassCompiler = major > 5 || major === 5 && minor >= 4;
+      if (enableModernSassCompiler) {
+        const sassEmbedded = isPackageExists("sass-embedded");
+        if (sassEmbedded) {
+          const omit = major > 5 || major === 5 && minor > 4 || major === 5 && minor === 4 && patch >= 2;
+          if (!omit) {
+            viteInlineConfig.css ??= {};
+            viteInlineConfig.css.preprocessorOptions ??= {};
+            viteInlineConfig.css.preprocessorOptions.sass ??= {};
+            viteInlineConfig.css.preprocessorOptions.sass.api = "modern-compiler";
+          }
+        } else {
+          viteInlineConfig.css ??= {};
+          viteInlineConfig.css.preprocessorOptions ??= {};
+          viteInlineConfig.css.preprocessorOptions.sass ??= {};
+          viteInlineConfig.css.preprocessorOptions.sass.api = "modern";
+          if (!("preprocessorMaxWorkers" in viteInlineConfig.css))
+            viteInlineConfig.css.preprocessorMaxWorkers = true;
+        }
       }
     }
     const vuetifyImportOptions = {};
@@ -1235,7 +1265,8 @@ function configureVite(configKey, nuxt, ctx) {
       vuetifyImportOptions.autoImport = { ignore };
     }
     viteInlineConfig.plugins.push(vuetifyImportPlugin(vuetifyImportOptions));
-    viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.logger));
+    if (typeof ctx.moduleOptions.styles !== "boolean")
+      viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles: ctx.moduleOptions.styles }, ctx.viteVersion, ctx.logger));
     viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(ctx));
     viteInlineConfig.plugins.push(vuetifyIconsPlugin(ctx));
     viteInlineConfig.plugins.push(vuetifyDateConfigurationPlugin(ctx));
@@ -1301,10 +1332,24 @@ export default defineNuxtPlugin({
 
 function configureNuxt(configKey, nuxt, ctx) {
   const {
+    styles,
     importComposables,
-    prefixComposables
+    prefixComposables,
+    disableVuetifyStyles
   } = ctx.moduleOptions;
   const runtimeDir = ctx.resolver.resolve("./runtime");
+  if (ctx.isSSR && !!styles && typeof styles === "object") {
+    const [major, minor] = getNuxtVersion(nuxt).split(".").map((v) => v.includes("-") ? v.split("-")[0] : v).map((v) => Number.parseInt(v));
+    const features = major > 3 || major === 3 && minor >= 9;
+    if (features)
+      nuxt.options.features.inlineStyles = false;
+    else
+      nuxt.options.experimental["inlineSSRStyles"] = false;
+  }
+  if (!disableVuetifyStyles) {
+    nuxt.options.css ??= [];
+    nuxt.options.css.unshift("vuetify/styles");
+  }
   nuxt.options.build.transpile.push(configKey);
   nuxt.options.build.transpile.push(runtimeDir);
   nuxt.options.build.transpile.push(/\/vuetify-nuxt-plugin\.(client|server)\.mjs$/);
@@ -1312,8 +1357,6 @@ function configureNuxt(configKey, nuxt, ctx) {
   nuxt.options.imports.transform.include ??= [];
   for (const virtual of RESOLVED_VIRTUAL_MODULES)
     nuxt.options.imports.transform.include.push(new RegExp(`${virtual}$`));
-  nuxt.options.css ??= [];
-  nuxt.options.css.unshift("vuetify/styles");
   extendWebpackConfig(() => {
     throw new Error("Webpack is not supported: vuetify-nuxt-module module can only be used with Vite!");
   });
@@ -1392,6 +1435,7 @@ const module = defineNuxtModule({
       importComposables: true,
       includeTransformAssetsUrls: true,
       styles: true,
+      disableVuetifyStyles: false,
       disableModernSassCompiler: false
     }
   }),
@@ -1402,6 +1446,7 @@ const module = defineNuxtModule({
     const versions = vuetifyPkg?.version?.split(".").map((v) => Number.parseInt(v));
     const vuetify3_4 = versions && versions.length > 1 && (versions[0] > 3 || versions[0] === 3 && versions[1] >= 4);
     const vuetify3_5 = versions && versions.length > 1 && (versions[0] > 3 || versions[0] === 3 && versions[1] >= 5);
+    const viteVersion = version$1.split(".").map((v) => v.includes("-") ? v.split("-")[0] : v).map((v) => Number.parseInt(v));
     const ctx = {
       logger,
       resolver: createResolver(import.meta.url),
@@ -1418,7 +1463,8 @@ const module = defineNuxtModule({
       componentsPromise: void 0,
       labComponentsPromise: void 0,
       vuetify3_4,
-      vuetify3_5
+      vuetify3_5,
+      viteVersion
     };
     await load(options, nuxt, ctx);
     configureNuxt(CONFIG_KEY, nuxt, ctx);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.17.1",
-  "packageManager": "pnpm@9.7.1",
+  "version": "0.18.1",
+  "packageManager": "pnpm@9.9.0",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -73,7 +73,8 @@
     "perfect-debounce": "^1.0.0",
     "ufo": "^1.5.4",
     "unconfig": "^0.5.5",
-    "vite-plugin-vuetify": "^2.0.3",
+    "upath": "^2.0.1",
+    "vite-plugin-vuetify": "^2.0.4",
     "vuetify": "^3.7.0"
   },
   "devDependencies": {
@@ -142,4 +143,4 @@
     "installDependencies": false,
     "startCommand": "node .stackblitz.js && pnpm install && nr prepack && nr dev:prepare && nr dev"
   }
-}
+}