vuetify-nuxt-module 1.0.0-alpha.2 → 1.0.0-alpha.4

package/README.md

@@ -0,0 +1,95 @@
+<div align="center">
+<picture>
+  <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>
+
+<p align='center'>
+<a href='https://www.npmjs.com/package/vuetify-nuxt-module' target="__blank">
+<img src='https://img.shields.io/npm/v/vuetify-nuxt-module?color=33A6B8&label=' alt="NPM version">
+</a>
+<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://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/vuetifyjs/nuxt-module" target="__blank">
+<img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
+</a>
+</p>
+
+<br>
+
+## 🚀 Features
+
+- 📖 [**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
+- 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
+
+## 📦 Install
+
+> Requires Vite, will not work with Webpack
+
+```bash
+npx nuxi@latest module add vuetify-nuxt-module
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/vuetify-nuxt-module)
+
+## 🦄 Usage
+
+> `vuetify-nuxt-module` is strongly opinionated and has a built-in default configuration out of the box. You can use it without any configuration, and it will work for most use cases.
+
+Add `vuetify-nuxt-module` module to `nuxt.config.ts` and configure it:
+
+```ts
+// Nuxt config file
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: [
+    'vuetify-nuxt-module'
+  ],
+  vuetify: {
+    moduleOptions: {
+      /* module specific options */
+    },
+    vuetifyOptions: {
+      /* vuetify options */
+    }
+  }
+})
+```
+
+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/vuetifyjs/nuxt-module/blob/main/src/types.ts).
+
+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/vuetifyjs/nuxt-module/blob/main/LICENSE) License &copy; 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)

package/dist/module.d.mts

@@ -309,7 +309,8 @@ interface MOptions {
      * @default true
      */
     rulesConfiguration?: {
-        fromLabs: boolean;
+        fromLabs?: boolean;
+        configFile?: string;
     };
     /**
      * Vuetify SSR client hints.

package/dist/module.json

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

package/dist/module.mjs

@@ -2,22 +2,22 @@ import { addPluginTemplate, addTemplate, resolvePath, extendWebpackConfig, isNux
 import { isPackageExists, getPackageInfo } from 'local-pkg';
 import semver from 'semver';
 import { createFilter, version as version$1 } from 'vite';
+import fs, { existsSync, statSync } from 'node:fs';
+import { isAbsolute, resolve, relative } from 'pathe';
 import defu from 'defu';
 import { transformAssetUrls } from 'vite-plugin-vuetify';
 import { pathToFileURL } from 'node:url';
 import { generateImports, resolveVuetifyBase, isObject, normalizePath } from '@vuetify/loader-shared';
 import destr from 'destr';
-import { isAbsolute, relative } from 'pathe';
 import { parseQuery, parseURL } from 'ufo';
-import fs, { existsSync, statSync } from 'node:fs';
 import fsp, { readFile } from 'node:fs/promises';
 import path from 'upath';
-import { resolve, dirname, relative as relative$1 } from 'node:path';
+import { resolve as resolve$1, dirname, relative as relative$1 } from 'node:path';
 import { debounce } from 'perfect-debounce';
 import process from 'node:process';
 import { createConfigLoader } from 'unconfig';
 
-const version = "1.0.0-alpha.2";
+const version = "1.0.0-alpha.4";
 
 const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `\0${VIRTUAL_VUETIFY_CONFIGURATION}`;
@@ -158,7 +158,7 @@ function addVuetifyNuxtPlugin(nuxt, ctx, mode) {
       }
       let rulesImports = "";
       let rulesPlugin = "";
-      if (mode === "client" && ctx.enableRules) {
+      if (ctx.enableRules) {
         rulesImports = [
           "",
           `import { rulesOptions } from '#build/vuetify/${ctx.rulesConfiguration.fromLabs ? "labs-" : ""}rules-configuration.mjs'`,
@@ -197,6 +197,17 @@ export default defineNuxtPlugin({
 function getTemplate(source, settings) {
   return [settings ? `@use '${settings}';` : "", `@use '${source}';`].filter(Boolean).join("\n");
 }
+function resolveVuetifyConfigFile(configFile, nuxt) {
+  if (typeof configFile === "string" && !isAbsolute(configFile)) {
+    for (const layer of nuxt.options._layers) {
+      const resolved = resolve(layer.config.rootDir, configFile);
+      if (existsSync(resolved)) {
+        return resolved;
+      }
+    }
+  }
+  return configFile;
+}
 async function configureNuxt(configKey, nuxt, ctx) {
   const {
     styles,
@@ -204,15 +215,16 @@ async function configureNuxt(configKey, nuxt, ctx) {
     prefixComposables
   } = ctx.moduleOptions;
   const runtimeDir = ctx.resolver.resolve("./runtime");
-  if (ctx.enableRules !== void 0) {
+  if (ctx.enableRules === void 0) {
     ctx.enableRules = ctx.vuetifyGte("3.8.0");
   }
   if (styles !== "none" && styles !== false) {
     nuxt.options.css ??= [];
     if (typeof styles === "object" && "configFile" in styles) {
+      const configFile = resolveVuetifyConfigFile(styles.configFile, nuxt);
       const a = addTemplate({
         filename: "vuetify.settings.scss",
-        getContents: async () => getTemplate("vuetify/styles", await resolvePath(styles.configFile))
+        getContents: async () => getTemplate("vuetify/styles", await resolvePath(configFile))
       });
       nuxt.options.css.push(a.dst);
     } else if (ctx.vuetifyGte("4.0.0")) {
@@ -229,7 +241,19 @@ async function configureNuxt(configKey, nuxt, ctx) {
   }
   nuxt.options.build.transpile.push(configKey, runtimeDir);
   if (ctx.enableRules) {
-    nuxt.options.build.transpile.push(`#build/vuetify/${ctx.rulesConfiguration.fromLabs ? "labs-" : ""}rules-configuration.mjs`);
+    const rulesConfigurationFile = `vuetify/${ctx.rulesConfiguration.fromLabs ? "labs-" : ""}rules-configuration.mjs`;
+    nuxt.options.build.transpile.push(`#build/${rulesConfigurationFile}`);
+    addTemplate({
+      filename: rulesConfigurationFile,
+      getContents: async () => {
+        if (ctx.rulesConfiguration?.configFile) {
+          const resolvedPath = await resolvePath(ctx.rulesConfiguration.configFile);
+          return `export { default as rulesOptions } from '${resolvedPath}'`;
+        }
+        return "export const rulesOptions = {}";
+      },
+      write: true
+    });
   }
   nuxt.options.build.transpile.push(/\/vuetify-nuxt-plugin\.(client|server)\.mjs$/);
   nuxt.options.imports.transform ??= {};
@@ -267,12 +291,18 @@ async function configureNuxt(configKey, nuxt, ctx) {
     if (ctx.vuetifyGte("3.10.0")) {
       composables.push("useMask");
     }
-    addImports(composables.map((name) => ({
-      name,
-      from: ctx.vuetifyGte("3.4.0") || name !== "useDate" ? "vuetify" : "vuetify/labs/date",
-      as: prefixComposables ? name.replace(/^use/, "useV") : void 0,
-      meta: { docsUrl: name === "useRules" ? "https://vuetifyjs.com/en/features/rules/" : `https://vuetifyjs.com/en/api/${toKebabCase(name)}/` }
-    })));
+    addImports(composables.map((name) => {
+      let from = ctx.vuetifyGte("3.4.0") || name !== "useDate" ? "vuetify" : "vuetify/labs/date";
+      if (name === "useRules" && ctx.rulesConfiguration?.fromLabs) {
+        from = "vuetify/labs/rules";
+      }
+      return {
+        name,
+        from,
+        as: prefixComposables ? name.replace(/^use/, "useV") : void 0,
+        meta: { docsUrl: name === "useRules" ? "https://vuetifyjs.com/en/features/rules/" : `https://vuetifyjs.com/en/api/${toKebabCase(name)}/` }
+      };
+    }));
   }
   if (ctx.ssrClientHints.enabled) {
     addPlugin({
@@ -406,7 +436,8 @@ async function buildConfiguration(ctx) {
   const importMapComponents = await componentsPromise;
   const componentsToImport = /* @__PURE__ */ new Map();
   for (const component of config.components) {
-    const { from } = importMapComponents[component];
+    const componentEntry = importMapComponents[component];
+    const from = componentEntry?.from;
     if (!from) {
       logger.warn(`Component ${component} not found in Vuetify.`);
       continue;
@@ -416,16 +447,21 @@ async function buildConfiguration(ctx) {
       logger.warn(`Component ${component} not found in Vuetify, please report a new issue.`);
       continue;
     }
-    if (!componentsToImport.has(parts[1])) {
-      componentsToImport.set(parts[1], []);
+    const bucket = parts[1];
+    if (!bucket) {
+      continue;
+    }
+    if (!componentsToImport.has(bucket)) {
+      componentsToImport.set(bucket, []);
     }
-    const componentsArray = componentsToImport.get(parts[1]);
+    const componentsArray = componentsToImport.get(bucket);
     if (!componentsArray.includes(component)) {
       componentsArray.push(component);
     }
   }
   for (const [key, component] of Object.entries(config.aliases)) {
-    const { from } = importMapComponents[component];
+    const componentEntry = importMapComponents[component];
+    const from = componentEntry?.from;
     if (!from) {
       logger.warn(`Component ${component} not found in Vuetify.`);
       continue;
@@ -435,10 +471,14 @@ async function buildConfiguration(ctx) {
       logger.warn(`Component ${component} not found in Vuetify, please report a new issue.`);
       continue;
     }
-    if (!componentsToImport.has(parts[1])) {
-      componentsToImport.set(parts[1], []);
+    const bucket = parts[1];
+    if (!bucket) {
+      continue;
+    }
+    if (!componentsToImport.has(bucket)) {
+      componentsToImport.set(bucket, []);
     }
-    const componentsArray = componentsToImport.get(parts[1]);
+    const componentsArray = componentsToImport.get(bucket);
     if (!componentsArray.includes(component)) {
       componentsArray.push(component);
     }
@@ -465,7 +505,8 @@ async function buildConfiguration(ctx) {
       componentsToImport.clear();
       const importMapLabComponents = await labComponentsPromise;
       for (const component of useLabComponents) {
-        const { from } = importMapLabComponents[component];
+        const componentEntry = importMapLabComponents[component];
+        const from = componentEntry?.from;
         if (!from) {
           logger.warn(`Lab Component ${component} not found in Vuetify.`);
           continue;
@@ -475,10 +516,14 @@ async function buildConfiguration(ctx) {
           logger.warn(`Lab Component ${component} not found in Vuetify, please report a new issue.`);
           continue;
         }
-        if (!componentsToImport.has(parts[1])) {
-          componentsToImport.set(parts[1], []);
+        const bucket = parts[1];
+        if (!bucket) {
+          continue;
         }
-        const componentsArray = componentsToImport.get(parts[1]);
+        if (!componentsToImport.has(bucket)) {
+          componentsToImport.set(bucket, []);
+        }
+        const componentsArray = componentsToImport.get(bucket);
         if (!componentsArray.includes(component)) {
           componentsArray.push(component);
         }
@@ -867,6 +912,7 @@ function vuetifyStylesPlugin(options, viteVersion, _logger) {
   const PREFIX = "vuetify-styles/";
   const SSR_PREFIX = `/@${PREFIX}`;
   const resolveCss = resolveCssFactory();
+  const toPath = (file) => fileImport ? pathToFileURL(file).href : normalizePath(file);
   return {
     name: "vuetify:styles:nuxt",
     enforce: "pre",
@@ -900,6 +946,9 @@ function vuetifyStylesPlugin(options, viteVersion, _logger) {
           return;
         }
         const target = await resolveCss(resolution.id);
+        if (target.startsWith(PREFIX) || target.startsWith(SSR_PREFIX)) {
+          return target;
+        }
         if (isNone) {
           noneFiles.add(target);
           return target;
@@ -920,7 +969,7 @@ function vuetifyStylesPlugin(options, viteVersion, _logger) {
           }
           const suffix = /\.scss/.test(target) ? ";\n" : "\n";
           const result = {
-            code: `@use "${configFile}"${suffix}@use "${fileImport ? pathToFileURL(target).href : normalizePath(target)}"${suffix}`,
+            code: `@use "${toPath(configFile)}"${suffix}@use "${toPath(target)}"${suffix}`,
             map: {
               mappings: ""
             }
@@ -1266,7 +1315,7 @@ async function loadVuetifyConfiguration(cwd = process.cwd(), configOrPath = cwd,
     inlineConfig = configOrPath;
     configOrPath = process.cwd();
   }
-  const resolved = resolve(cwd, configOrPath);
+  const resolved = resolve$1(cwd, configOrPath);
   let isFile = false;
   if (existsSync(resolved) && statSync(resolved).isFile()) {
     isFile = true;
@@ -1302,6 +1351,14 @@ async function loadVuetifyConfiguration(cwd = process.cwd(), configOrPath = cwd,
   });
   const result = await loader.load();
   result.config = result.config?.config === false ? Object.assign(defaults, inlineConfig) : Object.assign(defaults, result.config || inlineConfig);
+  if (result.config && typeof result.config === "object" && "vuetifyOptions" in result.config) {
+    const nestedOptions = result.config.vuetifyOptions;
+    if (typeof nestedOptions === "object" && nestedOptions !== null) {
+      console.warn('[@vuetify/nuxt-module] Detected nested "vuetifyOptions" in your configuration file. This usually happens when using a named export or wrapping options incorrectly. Please export the options directly using "export default".');
+      Object.assign(result.config, nestedOptions);
+      delete result.config.vuetifyOptions;
+    }
+  }
   delete result.config.config;
   return result;
 }
@@ -1529,7 +1586,7 @@ function registerWatcher(options, nuxt, ctx) {
   if (nuxt.options.dev) {
     let pageReload;
     nuxt.hooks.hook("builder:watch", (_event, path) => {
-      path = relative$1(nuxt.options.srcDir, resolve(nuxt.options.srcDir, path));
+      path = relative$1(nuxt.options.srcDir, resolve$1(nuxt.options.srcDir, path));
       if (!pageReload && ctx.vuetifyFilesToWatch.includes(path)) {
         return nuxt.callHook("restart");
       }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.4",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -82,7 +82,7 @@
     "@parcel/watcher": "^2.5.6",
     "@types/node": "^25.3.3",
     "@types/semver": "^7.7.1",
-    "@unocss/nuxt": "^66.6.2",
+    "@unocss/nuxt": "^66.6.5",
     "bumpp": "^10.4.1",
     "eslint": "^10.0.2",
     "luxon": "^3.7.2",