vuetify-nuxt-module 0.3.0 → 0.4.1

package/README.md

@@ -40,7 +40,7 @@
 - 🌍 **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 (WIP)**: use [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
+- 🎨 **Vuetify Blueprints**: use [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
 - 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
 
 ## 📦 Install
@@ -84,6 +84,34 @@ export default defineNuxtConfig({
 })
 ```
 
+## 🔥 Components, Directives, Lab Components
+
+The module will enable automatic tree shaking for Vuetify components.
+
+You don't need to install any Vuetify Vite Plugin (the module will throw an error if any Vuetify Vite Plugin is installed in your Nuxt configuration):
+- the module will provide auto-import support via `vuetify/dist/json/importMap.json` json file and Nuxt `components:extend` hook.
+- the module will register a custom Vite Plugin for Vuetify styles: it is just a copy from the original Vuetify Vite Styles Plugin, changing some virtual names mappings and handling SSR flags.
+
+### Global Components
+
+If you need to add some global component, use `vuetifyOptions.components` module option, it has been declared properly to have better DX.
+
+Check the [components definition](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts#L80-L81).
+
+You can also provide [Aliasing & Virtual Components](https://vuetifyjs.com/en/features/aliasing/#virtual-component-defaults) via `vuetifyOptions.aliases` module option to register components with a different name, only available for global components. The components require to be registered globally.
+
+### Directives
+
+By default, the module will not register any Vuetify directive. If you need to register some directive, use `vuetifyOptions.directives` module option, it has been declared properly to have better DX.
+
+You can register all the directives or only the ones you need: check the [directives definition](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts#L82-L83).
+
+### Labs Components
+
+The module provides support to use Vuetify [labs components](https://vuetifyjs.com/en/labs/introduction/) via `vuetifyOptions.labsComponents` module option, it has been declared properly to have better DX.
+
+You can register all the labs components or only the ones you need: check the [labsComponent definition](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts#L84-L85).
+
 ## 😃 Font Icons
 
 This module supports the following font icons libraries:
@@ -194,7 +222,7 @@ vuetify: {
       defaultSet: 'fa-svg',
       svg: {
         fa: {
-          libraries: [/* default export? */ false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
+          libraries: [[/* default export? */ false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']]
         }
       }
     }
@@ -274,7 +302,13 @@ If you are using another composables that collide with the Vuetify ones, enable
 
 ## 🎨 Vuetify Blueprints
 
-**WIP**
+The module supports Vuetify Blueprints, just add it to the `vuetifyOptions.blueprint` module option, but with some limitations:
+- `ssr` will be ignored, this flag can be only configured internally by the module via the Nuxt ssr option.
+- `components` will be ignored, configure them using the `vuetifyOptions.components` module option
+- `directives` will be ignored, configure them using the `vuetifyOptions.directives` module option.
+- `locale` will be ignored, configure it using the `vuetifyOptions.locale` module option.
+- `date` will be ignored, configure it using the `vuetifyOptions.date` module option.
+- `icons` will be ignored, configure it using the `vuetifyOptions.icons` module option.
 
 ## 👀 Full config
 

package/dist/module.d.ts

@@ -1,8 +1,9 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import * as vuetify from 'vuetify';
-import { VuetifyOptions } from 'vuetify';
-import * as vuetify_directives from 'vuetify/directives';
+import { VuetifyOptions, LocaleOptions, RtlOptions } from 'vuetify';
 import * as vuetify_labs_components from 'vuetify/labs/components';
+import * as vuetify_directives from 'vuetify/directives';
+import * as vuetify_components from 'vuetify/components';
 
 type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
 /**
@@ -74,11 +75,31 @@ interface IconsOptions {
         fa?: FontAwesomeSvgIconSet;
     };
 }
-type LabComponentName = keyof typeof vuetify_labs_components;
-type LabComponents = boolean | LabComponentName | LabComponentName[];
+type ComponentName = keyof typeof vuetify_components;
+type Components = false | ComponentName | ComponentName[];
 type DirectiveName = keyof typeof vuetify_directives;
 type Directives = boolean | DirectiveName | DirectiveName[];
-interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date' | 'icons'>> {
+type LabComponentName = keyof typeof vuetify_labs_components;
+type LabComponents = boolean | LabComponentName | LabComponentName[];
+interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'aliases' | 'components' | 'directives' | 'locale' | 'date' | 'icons'>> {
+    aliases?: Record<string, ComponentName>;
+    /**
+     * Do you need to configure some global components?.
+     *
+     * @default false
+     */
+    components?: Components;
+    /**
+     * Configure the locale messages, the locale, the fallback locale and RTL options.
+     *
+     * When `@nuxtjs/i18n` Nuxt module is present, the following options will be ignored:
+     * - `locale`
+     * - `fallback`
+     * - `rtl`
+     *
+     * The adapter will be `vuetify`, if you want to use another adapter, check `date` option.
+     */
+    locale?: Omit<LocaleOptions, 'adapter'> & RtlOptions;
     /**
      * Include the lab components?
      *
@@ -167,4 +188,4 @@ declare module '#app' {
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { DateAdapter, DateOptions, DirectiveName, Directives, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleOptions, VOptions, _default as default };
+export { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleOptions, VOptions, _default as default };

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.3.0"
+  "version": "0.4.1"
 }

package/dist/module.mjs

@@ -6,7 +6,7 @@ import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vueti
 import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
 
-const version = "0.3.0";
+const version = "0.4.1";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -184,11 +184,13 @@ 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, directives, labComponents, vuetifyAppOptions) {
+function vuetifyConfigurationPlugin(isDev, i18n, directives, labComponents, vuetifyAppOptions) {
   const {
     directives: _directives,
     date: _date,
     icons: _icons,
+    components,
+    aliases,
     ...newVuetifyOptions
   } = vuetifyAppOptions;
   return {
@@ -200,55 +202,100 @@ function vuetifyConfigurationPlugin(isDev, directives, labComponents, vuetifyApp
     },
     async load(id) {
       if (id === RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION) {
-        const directivesResult = buildDirectives();
-        const labComponentsResult = buildLabComponents();
-        return `${directivesResult.imports}
-${labComponentsResult.imports}
+        if (i18n && newVuetifyOptions.locale) {
+          delete newVuetifyOptions.locale.rtl;
+          delete newVuetifyOptions.locale.locale;
+          delete newVuetifyOptions.locale.fallback;
+        }
+        const result = buildConfiguration();
+        return `${result.imports}
 
 export const isDev = ${isDev}
 export function vuetifyConfiguration() {
-  const options = ${JSON.stringify(newVuetifyOptions)}
-  ${directivesResult.expression}
-  ${labComponentsResult.expression}
+  const options = JSON.parse('${JSON.stringify(newVuetifyOptions)}')
+  ${result.directives}
+  ${result.aliases}
+  ${result.components}
   return options
 }
 `;
       }
     }
   };
-  function buildDirectives() {
-    if (!directives)
-      return { imports: "", expression: "" };
-    if (typeof directives === "boolean") {
-      return {
-        imports: "import * as directives from 'vuetify/directives'",
-        expression: "options.directives = directives"
-      };
-    } else {
-      const useDirectives = Array.isArray(directives) ? directives : [directives];
-      return {
-        imports: `${useDirectives.map((d) => `import { ${d} } from 'vuetify/directives/${d}'`).join("\n")}`,
-        expression: `options.directives = {${useDirectives.join(",")}}`
-      };
-    }
-  }
-  function buildLabComponents() {
+  function buildConfiguration() {
     const dateOptions = vuetifyAppOptions.date;
-    if (!labComponents && !dateOptions)
-      return { imports: "", expression: "" };
-    if (typeof labComponents === "boolean") {
-      return {
-        imports: "import * as labsComponents from 'vuetify/labs/components'",
-        expression: "options.components = labsComponents"
-      };
-    } else {
-      const useComponents = Array.isArray(labComponents) ? labComponents : [labComponents];
-      const components = [...new Set(dateOptions ? ["VDatePicker", ...useComponents] : useComponents)];
-      return {
-        imports: `${components.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
-        expression: `options.components = {${components.join(",")}}`
-      };
+    const config = {
+      directives: "",
+      imports: [],
+      aliasEntries: [],
+      aliases: aliases || {},
+      components: new Set(components ? Array.isArray(components) ? components : [components] : []),
+      labComponents: /* @__PURE__ */ new Set()
+    };
+    if (directives) {
+      if (typeof directives === "boolean") {
+        config.imports.push("import * as directives from 'vuetify/directives'");
+        config.directives = "options.directives = directives";
+      } else {
+        const useDirectives = Array.isArray(directives) ? 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}'`));
+    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}'`);
+      }
+      config.aliasEntries.push(`'${key}': ${component}`);
+    });
+    let addDatePicker = true;
+    if (labComponents) {
+      if (typeof labComponents === "boolean") {
+        config.imports.push("import * as labsComponents from 'vuetify/labs/components'");
+        config.labComponents.add("*");
+        addDatePicker = false;
+      } 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}'`);
+          }
+        });
+        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) {
+      config.imports.push("import {VDatePicker} from 'vuetify/labs/VDatePicker'");
+      config.labComponents.add("VDatePicker");
+    }
+    let componentsEntry = "";
+    if (config.components.size) {
+      if (config.labComponents.size) {
+        if (config.labComponents.has("*"))
+          componentsEntry = `options.components = {${Array.from(config.components).join(",")},...labsComponents}`;
+        else
+          componentsEntry = `options.components = {${Array.from(config.components).join(",")},${Array.from(config.labComponents).join(",")}}`;
+      } else {
+        componentsEntry = `options.components = {${Array.from(config.components).join(",")}}`;
+      }
+    } else if (config.labComponents.size) {
+      if (config.labComponents.has("*"))
+        componentsEntry = "options.components = {...labsComponents}";
+      else
+        componentsEntry = `options.components = {${Array.from(config.labComponents).join(",")}}`;
+    }
+    return {
+      imports: config.imports.length ? config.imports.join("\n") : "",
+      components: componentsEntry,
+      aliases: config.aliasEntries.length ? `options.aliases = {${config.aliasEntries.join(",")}}` : "",
+      directives: config.directives
+    };
   }
 }
 
@@ -269,7 +316,7 @@ export const isDev = ${isDev}
 export const i18n = ${i18n}
 export const adapter = '${dateAdapter}'
 export function dateConfiguration() {
-  const options = ${JSON.stringify(newDateOptions)}
+  const options = JSON.parse('${JSON.stringify(newDateOptions)}')
   ${buildAdapter()}
   return options
 }
@@ -536,6 +583,7 @@ const module = defineNuxtModule({
     const vuetifyAppOptions = defu(vOptions, {
       ssr: isSSR
     });
+    cleanupBlueprint(vuetifyAppOptions);
     const { styles } = moduleOptions;
     const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
     let dateAdapter;
@@ -630,6 +678,7 @@ const module = defineNuxtModule({
       viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles }, logger));
       viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(
         nuxt.options.dev,
+        i18n,
         directives,
         labComponents,
         vuetifyAppOptions
@@ -677,5 +726,17 @@ function detectDate() {
   const result = [];
   return result;
 }
+function cleanupBlueprint(vuetifyOptions) {
+  const blueprint = vuetifyOptions.blueprint;
+  if (blueprint) {
+    delete blueprint.ssr;
+    delete blueprint.components;
+    delete blueprint.directives;
+    delete blueprint.locale;
+    delete blueprint.date;
+    delete blueprint.icons;
+    vuetifyOptions.blueprint = blueprint;
+  }
+}
 
 export { module as default };

package/dist/runtime/plugins/i18n.mjs

@@ -7,8 +7,7 @@ import {
   toRaw,
   watch
 } from "vue";
-import { toKebabCase } from "../../utils";
-import { useI18n } from "#imports";
+import { useI18n } from "vue-i18n";
 import { useNuxtApp } from "#app";
 export function createAdapter(vuetifyOptions) {
   vuetifyOptions.locale = {};
@@ -60,6 +59,9 @@ function useToggleScope(source, fn) {
     scope?.stop();
   });
 }
+function toKebabCase(str = "") {
+  return str.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
+}
 function useProxiedModel(props, prop, defaultValue, transformIn = (v) => v, transformOut = (v) => v) {
   const vm = getCurrentInstance("useProxiedModel");
   const internal = ref(props[prop] !== void 0 ? props[prop] : defaultValue);

package/dist/types.d.ts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { DateAdapter, DateOptions, DirectiveName, Directives, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleOptions, VOptions, default } from './module'
+export { ComponentName, Components, DateAdapter, DateOptions, DirectiveName, Directives, FontAwesomeSvgIconSet, FontIconSet, IconFontName, IconSetName, IconsOptions, JSSVGIconSet, LabComponentName, LabComponents, MOptions, ModuleOptions, VOptions, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "packageManager": "pnpm@8.6.6",
   "description": "Zero-Config Nuxt Module for Vuetify ",
   "author": "userquin <userquin@gmail.com>",