vuetify-nuxt-module 0.4.6 → 0.4.7

package/README.md

@@ -1,99 +1,99 @@
-<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>
-</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://vuetify-nuxt-module.netlify.app/" 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">
-<img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
-</a>
-</p>
-
-<br>
-
-## 🚀 Features
-
-- 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
-- 👌 **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 Plugin 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
-- 🔥 **Pure CSS Icons**: no more font/js icons, use the new `unocsss-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://v8.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 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 Layers and 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 Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
-- 👀 **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
-npm i vuetify-nuxt-module -D 
-
-# yarn 
-yarn add vuetify-nuxt-module -D
-
-# pnpm 
-pnpm add vuetify-nuxt-module -D
-```
-
-[![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://vuetify-nuxt-module.netlify.app/) 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).
-
-The virtual modules can be found in [configuration.d.ts](https://github.com/userquin/vuetify-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)
+<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>
+</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://vuetify-nuxt-module.netlify.app/" 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">
+<img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
+</a>
+</p>
+
+<br>
+
+## 🚀 Features
+
+- 📖 [**Documentation & guides**](https://vuetify-nuxt-module.netlify.app/)
+- 👌 **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 Plugin 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
+- 🔥 **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://v8.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 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 Layers and 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 Hook](https://nuxt.com/docs/guide/going-further/hooks#nuxt-hooks-build-time)
+- 👀 **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
+npm i vuetify-nuxt-module -D 
+
+# yarn 
+yarn add vuetify-nuxt-module -D
+
+# pnpm 
+pnpm add vuetify-nuxt-module -D
+```
+
+[![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://vuetify-nuxt-module.netlify.app/) 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).
+
+The virtual modules can be found in [configuration.d.ts](https://github.com/userquin/vuetify-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)

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.4.6"
+  "version": "0.4.7"
 }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
 import { isPackageExists } from 'local-pkg';
 
-const version = "0.4.6";
+const version = "0.4.7";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -184,7 +184,7 @@ const RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION = `/@nuxt-vuetify-configuratio
 const VIRTUAL_VUETIFY_ICONS_CONFIGURATION = "virtual:vuetify-icons-configuration";
 const RESOLVED_VIRTUAL_VUETIFY_ICONS_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_ICONS_CONFIGURATION.slice("virtual:".length)}`;
 
-function vuetifyConfigurationPlugin(isDev, i18n, directives, labComponents, vuetifyAppOptions) {
+function vuetifyConfigurationPlugin(isDev, i18n, directives, labComponents, vuetifyAppOptions, componentsPromise, labComponentsPromise, logger) {
   const {
     directives: _directives,
     date: _date,
@@ -207,7 +207,7 @@ function vuetifyConfigurationPlugin(isDev, i18n, directives, labComponents, vuet
           delete newVuetifyOptions.locale.locale;
           delete newVuetifyOptions.locale.fallback;
         }
-        const result = buildConfiguration();
+        const result = await buildConfiguration();
         return `${result.imports}
 
 export const isDev = ${isDev}
@@ -222,7 +222,7 @@ export function vuetifyConfiguration() {
       }
     }
   };
-  function buildConfiguration() {
+  async function buildConfiguration() {
     const dateOptions = vuetifyAppOptions.date;
     const config = {
       directives: "",
@@ -237,37 +237,95 @@ export function vuetifyConfiguration() {
         config.imports.push("import * as directives from 'vuetify/directives'");
         config.directives = "options.directives = directives";
       } else {
-        const useDirectives = Array.isArray(directives) ? directives : [directives];
+        const useDirectives = Array.isArray(directives) ? [...new Set(...directives)] : [directives];
         config.imports.push(useDirectives.map((d) => `import { ${d} } from 'vuetify/directives/${d}'`).join("\n"));
         config.directives = `options.directives = {${useDirectives.join(",")}}`;
       }
     }
-    config.imports.push(...Array.from(config.components).map((c) => `import {${c}} from 'vuetify/components/${c}'`));
+    const importMapComponents = await componentsPromise;
+    const componentsToImport = /* @__PURE__ */ new Map();
+    config.components.forEach((component) => {
+      const { from } = importMapComponents[component];
+      if (!from) {
+        logger.warn(`Component ${component} not found in Vuetify.`);
+        return;
+      }
+      const parts = from.split("/");
+      if (parts.length < 2) {
+        logger.warn(`Component ${component} not found in Vuetify, please report a new issue.`);
+        return;
+      }
+      if (!componentsToImport.has(parts[1]))
+        componentsToImport.set(parts[1], []);
+      const componentsArray = componentsToImport.get(parts[1]);
+      if (!componentsArray.includes(component))
+        componentsArray.push(component);
+    });
     Object.entries(config.aliases).forEach(([key, component]) => {
-      if (!config.components.has(component)) {
-        config.components.add(component);
-        config.imports.push(`import {${component}} from 'vuetify/components/${component}'`);
+      const { from } = importMapComponents[component];
+      if (!from) {
+        logger.warn(`Component ${component} not found in Vuetify.`);
+        return;
+      }
+      const parts = from.split("/");
+      if (parts.length < 2) {
+        logger.warn(`Component ${component} not found in Vuetify, please report a new issue.`);
+        return;
       }
+      if (!componentsToImport.has(parts[1]))
+        componentsToImport.set(parts[1], []);
+      const componentsArray = componentsToImport.get(parts[1]);
+      if (!componentsArray.includes(component))
+        componentsArray.push(component);
       config.aliasEntries.push(`'${key}': ${component}`);
     });
+    componentsToImport.forEach((componentsArray, from) => {
+      config.imports.push(`import {${componentsArray.join(",")}} from 'vuetify/components/${from}'`);
+    });
     let addDatePicker = true;
     if (labComponents) {
+      const useLabComponents = [];
       if (typeof labComponents === "boolean") {
         config.imports.push("import * as labsComponents from 'vuetify/labs/components'");
         config.labComponents.add("*");
         addDatePicker = false;
+      } else if (typeof labComponents === "string") {
+        useLabComponents.push(labComponents);
       } else if (Array.isArray(labComponents)) {
-        labComponents.forEach((labComponent) => {
-          if (!config.labComponents.has(labComponent)) {
-            config.labComponents.add(labComponent);
-            config.imports.push(`import {${labComponent}} from 'vuetify/labs/${labComponent}'`);
+        useLabComponents.push(...labComponents);
+      }
+      if (useLabComponents.length) {
+        componentsToImport.clear();
+        const importMapLabComponents = await labComponentsPromise;
+        useLabComponents.forEach((component) => {
+          const { from } = importMapLabComponents[component];
+          if (!from) {
+            logger.warn(`Lab Component ${component} not found in Vuetify.`);
+            return;
+          }
+          const parts = from.split("/");
+          if (parts.length < 2) {
+            logger.warn(`Lab Component ${component} not found in Vuetify, please report a new issue.`);
+            return;
+          }
+          if (!componentsToImport.has(parts[1]))
+            componentsToImport.set(parts[1], []);
+          const componentsArray = componentsToImport.get(parts[1]);
+          if (!componentsArray.includes(component))
+            componentsArray.push(component);
+          config.labComponents.add(component);
+        });
+        if (dateOptions && !config.labComponents.has("VDatePicker")) {
+          const entry = componentsToImport.get("VDatePicker");
+          if (entry) {
+            entry.push("VDatePicker");
+            config.labComponents.add("VDatePicker");
           }
+        }
+        componentsToImport.forEach((componentsArray, from) => {
+          config.imports.push(`import {${componentsArray.join(",")}} from 'vuetify/labs/${from}'`);
         });
         addDatePicker = !config.labComponents.has("VDatePicker");
-      } else {
-        config.imports.push(`import {${labComponents}} from 'vuetify/labs/${labComponents}'`);
-        config.labComponents.add(labComponents);
-        addDatePicker = labComponents !== "VDatePicker";
       }
     }
     if (dateOptions && addDatePicker) {
@@ -744,9 +802,17 @@ const module = defineNuxtModule({
     nuxt.hook("prepare:types", ({ references }) => {
       references.push({ types: "vuetify-nuxt-module/configuration" });
     });
+    const vuetifyBase = resolveVuetifyBase();
+    async function importMapResolver() {
+      return JSON.parse(await readFile(resolver.resolve(vuetifyBase, "dist/json/importMap.json"), "utf-8")).components;
+    }
+    async function importMapLabResolver() {
+      return JSON.parse(await readFile(resolver.resolve(vuetifyBase, "dist/json/importMap-labs.json"), "utf-8")).components;
+    }
+    const componentsPromise = importMapResolver();
+    const labComponentsPromise = importMapLabResolver();
     nuxt.hook("components:extend", async (c) => {
-      const vuetifyBase = resolveVuetifyBase();
-      const { components } = JSON.parse(await readFile(resolver.resolve(vuetifyBase, "dist/json/importMap.json"), "utf-8"));
+      const components = await componentsPromise;
       Object.keys(components).forEach((component) => {
         const from = components[component].from;
         c.push({
@@ -787,7 +853,10 @@ const module = defineNuxtModule({
         i18n,
         directives,
         labComponents,
-        vuetifyAppOptions
+        vuetifyAppOptions,
+        componentsPromise,
+        labComponentsPromise,
+        logger
       ));
       viteInlineConfig.plugins.push(vuetifyIconsPlugin(
         nuxt.options.dev,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "packageManager": "pnpm@8.6.8",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
@@ -125,4 +125,4 @@
     "installDependencies": false,
     "startCommand": "node .stackblitz.js && pnpm install && pnpm run dev"
   }
-}
+}