vuetify-nuxt-module 0.17.0 → 0.18.0

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
 <picture>
-  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/userquin/vuetify-nuxt-module/raw/main/hero-dark.svg" />
-  <img alt="vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify" src='https://github.com/userquin/vuetify-nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify"><br>
+  <source media="(prefers-color-scheme: dark)" srcset="https://github.com/vuetifyjs/nuxt-module/raw/main/hero-dark.svg" />
+  <img alt="vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify" src='https://github.com/vuetifyjs/nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt Module for Vuetify"><br>
 </picture>
 <p>Zero-config Nuxt Module for Vuetify</p>
 </div>
@@ -13,11 +13,11 @@
 <a href="https://www.npmjs.com/package/vuetify-nuxt-module" target="__blank">
     <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/vuetify-nuxt-module?color=476582&label=">
 </a>
-<a href="https://vuetify-nuxt-module.netlify.app/" target="__blank">
+<a href="https://nuxt.vuetifyjs.com/" target="__blank">
     <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides">
 </a>
 <br>
-<a href="https://github.com/userquin/vuetify-nuxt-module" target="__blank">
+<a href="https://github.com/vuetifyjs/nuxt-module" target="__blank">
 <img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
 </a>
 </p>
@@ -26,7 +26,7 @@
 
 ## 🚀 Features
 
-- 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
+- 📖 [**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
@@ -82,14 +82,14 @@ export default defineNuxtConfig({
 })
 ```
 
-Read the [📖 documentation](https://vuetify-nuxt-module.netlify.app/) for a complete guide on how to configure and use this module.
+Read the [📖 documentation](https://nuxt.vuetifyjs.com/) for a complete guide on how to configure and use this module.
 
 ## 👀 Full config
 
-Check out the [types](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts).
+Check out the [types](https://github.com/vuetifyjs/nuxt-module/blob/main/src/types.ts).
 
-The virtual modules can be found in [configuration.d.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/configuration.d.ts) file.
+The virtual modules can be found in [configuration.d.ts](https://github.com/vuetifyjs/nuxt-module/blob/main/configuration.d.ts) file.
 
 ## 📄 License
 
-[MIT](https://github.com/userquin/vuetify-nuxt-module/blob/main/LICENSE) License &copy; 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)
+[MIT](https://github.com/vuetifyjs/nuxt-module/blob/main/LICENSE) License &copy; 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)

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

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

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.9.0",
     "bridge": false
   },
-  "version": "0.17.0",
+  "version": "0.18.0",
   "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.0";
+const version = "0.18.0";
 
 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,17 +1,17 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.17.0",
-  "packageManager": "pnpm@9.7.1",
+  "version": "0.18.0",
+  "packageManager": "pnpm@9.9.0",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
-  "homepage": "https://github.com/userquin/vuetify-nuxt-module#readme",
+  "homepage": "https://github.com/vuetifyjs/nuxt-module#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/userquin/vuetify-nuxt-module.git"
+    "url": "https://github.com/vuetifyjs/nuxt-module.git"
   },
-  "bugs": "https://github.com/userquin/vuetify-nuxt-module/issues",
+  "bugs": "https://github.com/vuetifyjs/nuxt-module/issues",
   "keywords": [
     "nuxt",
     "nuxt 3",
@@ -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": {