vuetify-nuxt-module 0.2.4 → 0.4.0

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:
@@ -175,7 +203,7 @@ vuetify: {
 
 ### fa-svg
 
-You only need to add `@fortawesome/fontawesome-svg-core`, `@fortawesome/vue-fontawesome`, and `@fortawesome/free-solid-svg-icons` dependencies to your project and configure the default set:
+You only need to add `@fortawesome/fontawesome-svg-core`, `@fortawesome/vue-fontawesome` and `@fortawesome/free-solid-svg-icons` dependencies to your project and configure the default set:
 ```ts
 vuetify: {
   vuetifyOptions: {
@@ -194,7 +222,7 @@ vuetify: {
       defaultSet: 'fa-svg',
       svg: {
         fa: {
-          libraries: [/* default export? */ false, /* export name */ 'fas', /* import */ '@fortawesome/free-solid-svg-icons']
+          libraries: [/* default export? */ false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
         }
       }
     }
@@ -210,7 +238,7 @@ vuetify: {
   vuetifyOptions: {
     icons: {
       defaultSet: 'mdi'
-      sets: [{ name: 'mdi' }, { name: 'fa' }]
+      sets: ['mdi', 'fa']
     }
   }
 }
@@ -248,7 +276,7 @@ If you want to use a custom date adapter, you can configure it using `vuetifyOpt
   import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
   ```
 
-Check out [vuetify-date](./src/runtime/plugins/vuetify-date.mts) plugin for an example of a custom date adapter and how to access to the configuration.
+Check out [vuetify-date](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/runtime/plugins/vuetify-date.mts) plugin for an example of a custom date adapter and how to access to the configuration.
 
 ## ⚙️ Auto-Import Vuetify Composables
 
@@ -274,14 +302,20 @@ 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
 
-Check out the type declaration [src/types.ts](./src/types.ts).
+Check out the type declaration [src/types.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts).
 
-The virtual modules can be found in [configuration.d.ts](./configuration.d.ts) file.
+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](./LICENSE) License © 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)
+[MIT](https://github.com/userquin/vuetify-nuxt-module/blob/main/LICENSE) License © 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)

package/dist/module.d.ts

@@ -1,8 +1,10 @@
 import * as _nuxt_schema from '@nuxt/schema';
 import * as vuetify from 'vuetify';
-import { VuetifyOptions } from 'vuetify';
+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 BooleanOrArrayString = boolean | string[];
 type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
 /**
  * Date configuration.
@@ -30,16 +32,14 @@ interface DateOptions {
      *
      * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored, locales will be extracted from the available locales.
      */
-    locale: Record<string, any>;
+    locale?: Record<string, any>;
 }
 type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'custom';
-interface IconSet {
-    name: IconSetName;
-}
-interface JSSVGIconSet extends IconSet {
+type IconFontName = 'mdi' | 'fa' | 'fa4' | 'md';
+interface JSSVGIconSet {
     aliases?: Record<string, string>;
 }
-interface FontAwesomeSvgIconSet extends IconSet {
+interface FontAwesomeSvgIconSet {
     /**
      * The libraries to import and register with the corresponding name.
      *
@@ -53,7 +53,8 @@ interface FontAwesomeSvgIconSet extends IconSet {
      */
     libraries?: [defaultExport: boolean, name: string, library: string][];
 }
-interface FontIconSet extends IconSet {
+interface FontIconSet {
+    name: IconFontName;
     /**
      * Use CDN?
      *
@@ -68,13 +69,37 @@ interface FontIconSet extends IconSet {
 }
 interface IconsOptions {
     defaultSet: IconSetName;
-    sets?: FontIconSet[];
+    sets?: IconFontName | IconFontName[] | FontIconSet[];
     svg?: {
         mdi?: JSSVGIconSet;
         fa?: FontAwesomeSvgIconSet;
     };
 }
-interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date' | 'icons'>> {
+type ComponentName = keyof typeof vuetify_components;
+type Components = false | ComponentName | ComponentName[];
+type DirectiveName = keyof typeof vuetify_directives;
+type Directives = boolean | DirectiveName | DirectiveName[];
+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?
      *
@@ -86,7 +111,7 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
      *
      * @default false
      */
-    labComponents?: BooleanOrArrayString;
+    labComponents?: LabComponents;
     /**
      * Include the directives?
      *
@@ -96,7 +121,7 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
      *
      * @default false
      */
-    directives?: BooleanOrArrayString;
+    directives?: Directives;
     /**
      * Date configuration.
      *
@@ -163,4 +188,4 @@ declare module '#app' {
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, 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.2.4"
+  "version": "0.4.0"
 }

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.2.4";
+const version = "0.4.0";
 
 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,53 +202,98 @@ 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: "" };
+  function buildConfiguration() {
+    const dateOptions = vuetifyAppOptions.date;
+    const config = {
+      directives: "",
+      imports: [],
+      aliasEntries: [],
+      aliases: aliases || {},
+      components: new Set(components ? Array.isArray(components) ? components : [components] : []),
+      labComponents: /* @__PURE__ */ new Set()
+    };
     if (typeof directives === "boolean") {
-      return {
-        imports: "import * as directives from 'vuetify/directives'",
-        expression: "options.directives = directives"
-      };
+      config.imports.push("import * as directives from 'vuetify/directives'");
+      config.directives = "options.directives = directives";
     } else {
-      return {
-        imports: `${directives.map((d) => `import { ${d} } from 'vuetify/directives/${d}'`).join("\n")}`,
-        expression: `options.directives = {${directives.join(",")}}`
-      };
+      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(",")}}`;
     }
-  }
-  function buildLabComponents() {
-    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 components = [...new Set(dateOptions ? ["VDatePicker", ...labComponents] : labComponents)];
-      return {
-        imports: `${components.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
-        expression: `options.components = {${components.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
+    };
   }
 }
 
@@ -267,7 +314,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
 }
@@ -297,15 +344,25 @@ const iconsCDN = {
   fa: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css",
   fa4: "https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css"
 };
+const disabledResolvedIcons = Object.freeze({
+  enabled: false,
+  imports: [],
+  aliases: [],
+  sets: [],
+  cdn: [],
+  local: [],
+  svg: {}
+});
 function prepareIcons(logger, vuetifyOptions) {
   if (vuetifyOptions.icons === false)
-    return { enabled: false };
-  vuetifyOptions.icons = vuetifyOptions.icons ?? {};
-  let { defaultSet = "mdi", sets } = vuetifyOptions.icons;
+    return disabledResolvedIcons;
+  const icons = vuetifyOptions.icons || {};
+  let { defaultSet = "mdi", sets } = icons;
   if (!defaultSet)
-    defaultSet = vuetifyOptions.icons.defaultSet = "mdi";
-  if (!sets)
+    defaultSet = icons.defaultSet = "mdi";
+  if (!sets && defaultSet !== "mdi-svg" && defaultSet !== "fa-svg" && defaultSet !== "custom")
     sets = [{ name: defaultSet || "mdi" }];
+  sets = sets ? convertFontSetsToObjectNotation(sets) : void 0;
   const resolvedIcons = {
     enabled: true,
     defaultSet,
@@ -318,30 +375,33 @@ function prepareIcons(logger, vuetifyOptions) {
       mdi: false
     }
   };
-  sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
-    resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
-    resolvedIcons.sets.push(name);
-    if (isPackageExists(iconsPackageNames[name].name))
-      resolvedIcons.local.push(iconsPackageNames[name].css);
-    else
-      resolvedIcons.cdn.push(iconsCDN[name]);
-  });
-  let faSvg = vuetifyOptions.icons.svg?.fa;
+  if (sets) {
+    sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
+      resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
+      resolvedIcons.sets.push(name);
+      if (isPackageExists(iconsPackageNames[name].name))
+        resolvedIcons.local.push(iconsPackageNames[name].css);
+      else
+        resolvedIcons.cdn.push(iconsCDN[name]);
+    });
+  }
+  let faSvg = icons.svg?.fa;
   if (defaultSet === "fa-svg" || faSvg) {
+    if (!faSvg)
+      faSvg = {};
     let faSvgExists = isPackageExists("@fortawesome/fontawesome-svg-core");
     if (!faSvgExists)
       logger.warn("Missing @fortawesome/fontawesome-svg-core dependency, install it!");
     faSvgExists = isPackageExists("@fortawesome/vue-fontawesome");
     if (faSvgExists) {
-      if (!faSvg?.libraries?.length) {
-        faSvg = faSvg || {};
+      if (!faSvg.libraries?.length)
         faSvg.libraries = [[false, "fas", "@fortawesome/free-solid-svg-icons"]];
-      }
       for (const p in faSvg.libraries) {
         const [_defaultExport, _name, library] = faSvg.libraries[p];
-        faSvgExists = isPackageExists(library);
-        if (!faSvgExists)
+        if (!isPackageExists(library)) {
+          faSvgExists = false;
           logger.warn(`Missing library ${library} dependency, install it!`);
+        }
       }
     } else {
       logger.warn("Missing @fortawesome/vue-fontawesome dependency, install it!");
@@ -361,8 +421,10 @@ function prepareIcons(logger, vuetifyOptions) {
         resolvedIcons.defaultSet = "fa";
     }
   }
-  const mdiSvg = vuetifyOptions.icons.svg?.mdi;
+  let mdiSvg = icons.svg?.mdi;
   if (defaultSet === "mdi-svg" || mdiSvg) {
+    if (!mdiSvg)
+      mdiSvg = {};
     const mdiSvgExists = isPackageExists("@mdi/js");
     if (mdiSvgExists) {
       resolvedIcons.svg.mdi = true;
@@ -383,10 +445,24 @@ function prepareIcons(logger, vuetifyOptions) {
   }
   if (!resolvedIcons.local?.length && !resolvedIcons.cdn?.length && !resolvedIcons.svg?.mdi && !resolvedIcons.svg?.fa?.length) {
     logger.warn("No icons found, icons disabled!");
-    return { enabled: false };
+    return disabledResolvedIcons;
   }
   return resolvedIcons;
 }
+function convertFontSetsToObjectNotation(sets) {
+  const result = [];
+  if (typeof sets === "string") {
+    result.push({ name: sets });
+  } else {
+    for (const set of sets) {
+      if (typeof set === "string")
+        result.push({ name: set });
+      else
+        result.push(set);
+    }
+  }
+  return result;
+}
 
 function vuetifyIconsPlugin(isDev, resolvedIcons) {
   const iconsOptionsPromise = prepareIcons();
@@ -505,6 +581,7 @@ const module = defineNuxtModule({
     const vuetifyAppOptions = defu(vOptions, {
       ssr: isSSR
     });
+    cleanupBlueprint(vuetifyAppOptions);
     const { styles } = moduleOptions;
     const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
     let dateAdapter;
@@ -518,7 +595,7 @@ const module = defineNuxtModule({
         if (adapter === "vuetify" || adapter === "custom") {
           dateAdapter = adapter;
         } else {
-          if (date.find((d) => d[0] === adapter) === void 0)
+          if (date.find((d) => d === adapter) === void 0)
             logger.warn(`Ignoring Vuetify Date configuration, date adapter "@date-io/${adapter}" not installed!`);
           else
             dateAdapter = adapter;
@@ -559,8 +636,8 @@ const module = defineNuxtModule({
     nuxt.hook("prepare:types", ({ references }) => {
       references.push({ types: "vuetify-nuxt-module/configuration" });
     });
-    const vuetifyBase = resolveVuetifyBase();
     nuxt.hook("components:extend", async (c) => {
+      const vuetifyBase = resolveVuetifyBase();
       const { components } = JSON.parse(await readFile(resolver.resolve(vuetifyBase, "dist/json/importMap.json"), "utf-8"));
       Object.keys(components).forEach((component) => {
         const from = components[component].from;
@@ -568,7 +645,6 @@ const module = defineNuxtModule({
           pascalName: component,
           kebabName: toKebabCase(component),
           export: component,
-          // pointing to the mjs file, links will not work: there is d.mts file for each component
           filePath: `${resolver.resolve(vuetifyBase, `lib/${from}`)}`,
           shortPath: `components/${from}`,
           chunkName: toKebabCase(component),
@@ -600,6 +676,7 @@ const module = defineNuxtModule({
       viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles }, logger));
       viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(
         nuxt.options.dev,
+        i18n,
         directives,
         labComponents,
         vuetifyAppOptions
@@ -647,5 +724,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 { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, 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.2.4",
+  "version": "0.4.0",
   "packageManager": "pnpm@8.6.6",
   "description": "Zero-Config Nuxt Module for Vuetify ",
   "author": "userquin <userquin@gmail.com>",