vuetify-nuxt-module 0.4.4 → 0.4.6

package/README.md

@@ -13,11 +13,9 @@
 <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://vite-pwa-org.netlify.app/frameworks/nuxt" target="__blank">
+<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">
@@ -28,12 +26,14 @@
 
 ## 🚀 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)
@@ -86,325 +86,11 @@ 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).
-
-## 🔩 Nuxt Layers and Hooks
-
-You can 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 Layers
-
-Add your Vuetify configuration to a layer and then configure the module to use it:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  extends: ['my-awesome-vuetify-layer'],
-  modules: ['vuetify-nuxt-module']
-})
-```
-
-### Nuxt Hook
-
-You can use a custom module to load your Vuetify configuration:
-```ts
-// Nuxt config file
-import MyVuetifyModule from './modules/my-vuetify-module'
-
-export default defineNuxtConfig({
-  modules: [MyVuetifyModule, 'vuetify-nuxt-module']
-})
-```
-
-and your module will load your configuration via `vuetify:registerModule` Nuxt hook:
-```ts
-// modules/my-vuetify-module
-export default defineNuxtModule({
-  setup(_options, nuxt) {
-    nuxt.hook('vuetify:registerModule', register => register({
-      moduleOptions: {
-        /* module specific options */
-      },
-      vuetifyOptions: {
-        /* vuetify options */
-      },
-    }))
-  },
-})
-```
-
-## 😃 Font Icons
-
-This module supports the following font icons libraries:
-- [Material Design Icons](https://materialdesignicons.com/)
-- [Material Icons](https://fonts.google.com/icons)
-- [Font Awesome 4](https://fontawesome.com/v4.7.0/)
-- [Font Awesome 5](https://fontawesome.com/)
-
-By default, the module will use the `mdi` font icon library. You can change it by setting the `defaultSet` option to:
-- `mdi` for [Material Design Icons](https://materialdesignicons.com/)
-- `md` for [Material Icons](https://fonts.google.com/icons)
-- `fa4` for [Font Awesome 4](https://fontawesome.com/v4.7.0/)
-- `fa` for [Font Awesome 5](https://fontawesome.com)
-
-To configure a font icon you only need to specify the default set:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'mdi'
-      }
-    }
-  }
-})
-```
-
-The module will use the CDN version of the font icon. If you want to use the local version, you only need to install the corresponding dependency, the module will auto-detect it and will switch to register the font to use the local version.
-
-The CDN used for each font icon library, you can use the `cdn` option to change it:
-- [CDN for Material Design Icons (mdi)](https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css)
-- [CDN for Material Icons (md)](https://fonts.googleapis.com/css?family=Material+Icons)
-- [CDN for Font Awesome 4 (fa4)](https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css)
-- [CDN for Font Awesome 5 (fa)](https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css)
-
-To change the CDN for a font icon library you only need to specify the `cdn` option:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'mdi',
-        sets: [{
-          name: 'mdi',
-          cdn: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons'
-        }]
-      }
-    }
-  }
-})
-```
-
-## 🎭 SVG Icons
-
-This module supports the following SVG icon libraries:
-- [@mdi/js](https://www.npmjs.com/package/@mdi/js)
-- [@fortawesome/fontawesome-svg-core](https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core)
-
-We're trying to figure out how to include the following SVG icon libraries:
-- [Nuxt Icon](https://github.com/nuxt-modules/icon)
-- [unplugin-icons](https://github.com/antfu/unplugin-icons)
-
-### mdi-svg
-
-You only need to add `@mdi/js` dependency to your project and configure the default set:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'mdi-svg'
-      }
-    }
-  }
-})
-```
-
-You can also add icon aliases:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'mdi-svg',
-        svg: {
-          mdi: {
-            aliases: {
-              account: 'mdiAccount'
-            }
-          }
-        }
-      }
-    }
-  }
-})
-```
-
-### 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:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'fa-svg'
-      }
-    }
-  }
-})
-```
-
-You can also add more libraries and install them in your project, the module will register them for you (this is the default configuration using the above configuration):
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'fa-svg',
-        svg: {
-          fa: {
-            libraries: [
-              [/* default export? */ false, /* export name */ 'fas', /* library */ '@fortawesome/free-solid-svg-icons']
-            ]
-          }
-        }
-      }
-    }
-  }
-})
-```
-
-## 📦 Multiple Icon Sets
-
-You can register multiple icons sets adding them to the sets array, don't forget to add the default set, otherwise 'mdi' will be used:
-```ts
-// Nuxt config file
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: ['vuetify-nuxt-module'],
-  vuetify: {
-    vuetifyOptions: {
-      icons: {
-        defaultSet: 'mdi',
-        sets: ['mdi', 'fa']
-      }
-    }
-  }
-})
-```
-
-## 🌍 I18n support
-
-> Requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `8.0.0.beta.13`.
-
-You can check the playground folder, you can run it using single or multiple json files per locale:
-- for single file per locale: run from root folder `pnpm install && nr dev:prepare && nr dev`
-- for multiple files per locale: run from root folder `pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json`
-
-## 📆 Date components support
-
-Right now you can only use Vuetify adapter, there is a bug and will not work, I'm working on it: https://github.com/userquin/vuetify-nuxt-module/pull/9#issuecomment-1620023814.
-
-To use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/):
-- install one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters (optional)
-- configure the date entry in your Vuetify configuration:
-  ```ts
-  vuetifyOptions: {
-    date: {
-      adapter: 'vuetify' // 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
-    }
-  }
-  ```
-
-If you also have `@nuxtjs/i18n` module installed, `vuetifyOptions.date.locale` will be automatically configured, beware, the configured `locale` entry will be ignored.
-
-If you want to use a custom date adapter, you can configure it using `vuetifyOptions.date.adapter = 'custom'`, and then:
-- add a Nuxt Plugin and add the `vuetify:configuration` hook to configure your Vuetify options
-- you can import the `virtual:vuetify-date-configuration` module, you will have access to the configuration:
-  ```ts
-  import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-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
-
-No more Vuetify composables manual imports, auto import is enabled by default:
-- [useDate](https://vuetifyjs.com/en/api/use-date/)
-- [useDefaults](https://vuetifyjs.com/en/api/use-defaults/)
-- [useDisplay](https://vuetifyjs.com/en/api/use-display/)
-- [useLayout](https://vuetifyjs.com/en/api/use-layout/)
-- [useLocale](https://vuetifyjs.com/en/api/use-locale/)
-- [useRtl](https://vuetifyjs.com/en/api/use-rtl/)
-- [useTheme](https://vuetifyjs.com/en/api/use-theme/)
-
-You can disable auto-import using `moduleOptions.importComposables: false`.
-
-If you are using another composables that collide with the Vuetify ones, enable `moduleOptions.prefixComposables: true` to prefix them with `V`:
-- `useLocale` => `useVLocale`
-- `useDefaults` => `useVDefaults`
-- `useDisplay` => `useVDisplay`
-- `useLayout` => `useVLayout`
-- `useRtl` => `useVRtl`
-- `useTheme` => `useVTheme`
-
-
-## 🎨 Vuetify Blueprints
-
-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
+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 type declaration [src/types.ts](https://github.com/userquin/vuetify-nuxt-module/blob/main/src/types.ts).
+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.
 

package/dist/module.d.ts

@@ -34,8 +34,8 @@ interface DateOptions {
      */
     locale?: Record<string, any>;
 }
-type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'custom';
-type IconFontName = 'mdi' | 'fa' | 'fa4' | 'md';
+type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'unocss-mdi' | 'custom';
+type IconFontName = 'unocss-mdi' | 'mdi' | 'fa' | 'fa4' | 'md';
 interface JSSVGIconSet {
     aliases?: Record<string, string>;
 }
@@ -68,7 +68,16 @@ interface FontIconSet {
     cdn?: string;
 }
 interface IconsOptions {
+    /**
+     * @default 'mdi'
+     */
     defaultSet: IconSetName;
+    /**
+     * The prefix for UnoCSS Preset Icons.
+     *
+     * @default 'i-'
+     */
+    unocssIconPrefix?: string;
     sets?: IconFontName | IconFontName[] | FontIconSet[];
     svg?: {
         mdi?: JSSVGIconSet;
@@ -191,6 +200,10 @@ declare module '#app' {
             isDev: boolean;
             vuetifyOptions: VuetifyOptions;
         }) => Promise<void> | void;
+        'vuetify:before-create': (options: {
+            isDev: boolean;
+            vuetifyOptions: VuetifyOptions;
+        }) => Promise<void> | void;
     }
 }
 

package/dist/module.json

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

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.4";
+const version = "0.4.6";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -333,21 +333,26 @@ export function dateConfiguration() {
   }
 }
 
-const cssFonts = ["mdi", "md", "fa", "fa4"];
+const cssFonts = ["unocss-mdi", "mdi", "md", "fa", "fa4"];
 const iconsPackageNames = {
-  mdi: { name: "@mdi/font", css: "@mdi/font/css/materialdesignicons.css" },
-  md: { name: "material-design-icons-iconfont", css: "@mdi/font/css/materialdesignicons.css" },
-  fa: { name: "@fortawesome/fontawesome-free", css: "@fortawesome/fontawesome-free/css/all.css" },
-  fa4: { name: "font-awesome@4.7.0", css: "font-awesome/css/font-awesome.min.css" }
+  "unocss-mdi": { name: "@mdi/font", css: "" },
+  "mdi": { name: "@mdi/font", css: "@mdi/font/css/materialdesignicons.css" },
+  "md": { name: "material-design-icons-iconfont", css: "@mdi/font/css/materialdesignicons.css" },
+  "fa": { name: "@fortawesome/fontawesome-free", css: "@fortawesome/fontawesome-free/css/all.css" },
+  "fa4": { name: "font-awesome@4.7.0", css: "font-awesome/css/font-awesome.min.css" }
 };
 const iconsCDN = {
-  mdi: "https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css",
-  md: "https://fonts.googleapis.com/css?family=Material+Icons",
-  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"
+  "unocss-mdi": "",
+  "mdi": "https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css",
+  "md": "https://fonts.googleapis.com/css?family=Material+Icons",
+  "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,
+  unocss: false,
+  unocssAliases: false,
+  unocssIconPrefix: "i-",
   imports: [],
   aliases: [],
   sets: [],
@@ -355,7 +360,7 @@ const disabledResolvedIcons = Object.freeze({
   local: [],
   svg: {}
 });
-function prepareIcons(logger, vuetifyOptions) {
+function prepareIcons(unocssPresent, logger, vuetifyOptions) {
   if (vuetifyOptions.icons === false)
     return disabledResolvedIcons;
   const icons = vuetifyOptions.icons || {};
@@ -364,9 +369,12 @@ function prepareIcons(logger, vuetifyOptions) {
     defaultSet = icons.defaultSet = "mdi";
   if (!sets && defaultSet !== "mdi-svg" && defaultSet !== "fa-svg" && defaultSet !== "custom")
     sets = [{ name: defaultSet || "mdi" }];
-  sets = sets ? convertFontSetsToObjectNotation(sets) : void 0;
+  sets = sets ? convertFontSetsToObjectNotation(sets) : [];
   const resolvedIcons = {
     enabled: true,
+    unocss: unocssPresent && (defaultSet === "unocss-mdi" || sets.some((s) => s.name === "unocss-mdi")),
+    unocssAliases: defaultSet === "unocss-mdi",
+    unocssIconPrefix: icons.unocssIconPrefix ?? "i-",
     defaultSet,
     sets: [],
     aliases: [],
@@ -378,7 +386,14 @@ function prepareIcons(logger, vuetifyOptions) {
     }
   };
   if (sets) {
+    if (!unocssPresent && defaultSet === "unocss-mdi") {
+      logger.warn("Configured unocss-mdi as default icon set and @unocss/nuxt is not installed, reverting configuration to use mdi icon set: install @unocss/nuxt module or change the default icon set!");
+      defaultSet = "mdi";
+      sets = sets.filter((s) => s.name !== "unocss-mdi");
+    }
     sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
+      if (name === "unocss-mdi")
+        return;
       resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
       resolvedIcons.sets.push(name);
       if (isPackageExists(iconsPackageNames[name].name))
@@ -386,6 +401,13 @@ function prepareIcons(logger, vuetifyOptions) {
       else
         resolvedIcons.cdn.push(iconsCDN[name]);
     });
+    if (resolvedIcons.unocss && defaultSet === "unocss-mdi") {
+      if (!resolvedIcons.sets.includes("mdi")) {
+        resolvedIcons.sets.push("mdi");
+        resolvedIcons.imports.push("import {mdi} from 'vuetify/iconsets/mdi'");
+      }
+      resolvedIcons.defaultSet = "mdi";
+    }
   }
   let faSvg = icons.svg?.fa;
   if (defaultSet === "fa-svg" || faSvg) {
@@ -445,7 +467,7 @@ function prepareIcons(logger, vuetifyOptions) {
       logger.warn("Missing @mdi/js dependency, install it!");
     }
   }
-  if (!resolvedIcons.local?.length && !resolvedIcons.cdn?.length && !resolvedIcons.svg?.mdi && !resolvedIcons.svg?.fa?.length) {
+  if (defaultSet !== "custom" && !resolvedIcons.unocss && !resolvedIcons.local?.length && !resolvedIcons.cdn?.length && !resolvedIcons.svg?.mdi && !resolvedIcons.svg?.fa?.length) {
     logger.warn("No icons found, icons disabled!");
     return disabledResolvedIcons;
   }
@@ -484,7 +506,7 @@ export function iconsConfiguration() {
 }
 `;
         }
-        const { aliases, fa, defaultSet, imports, sets } = await iconsOptionsPromise;
+        const { unocss, aliases, fa, defaultSet, imports, sets } = await iconsOptionsPromise;
         if (!defaultSet) {
           return `export const isDev = ${isDev}
 export function iconsConfiguration() {
@@ -493,7 +515,6 @@ export function iconsConfiguration() {
 `;
         }
         return `${imports}
-
 export const isDev = ${isDev}
 export function iconsConfiguration() {
 ${fa.map((f) => `  ${f}`).join("\n")}
@@ -503,6 +524,7 @@ ${fa.map((f) => `  ${f}`).join("\n")}
     sets: { ${sets} }
   }
 }
+${unocss}
 `;
       }
     }
@@ -510,6 +532,7 @@ ${fa.map((f) => `  ${f}`).join("\n")}
   async function prepareIcons() {
     if (!resolvedIcons.enabled) {
       return {
+        unocss: "",
         defaultSet: void 0,
         imports: "",
         sets: "",
@@ -524,9 +547,56 @@ ${fa.map((f) => `  ${f}`).join("\n")}
       ...aliases,
       ${alias.join(",\n")}
     },
+`;
+    }
+    let unocss = "";
+    if (resolvedIcons.unocss && resolvedIcons.unocssAliases) {
+      resolvedIcons.imports.unshift("// @unocss-include");
+      const prefix = `${resolvedIcons.unocssIconPrefix}mdi:`;
+      unocss = `const aliases = ${JSON.stringify({
+        collapse: `${prefix}chevron-up`,
+        complete: `${prefix}check`,
+        cancel: `${prefix}close-circle`,
+        close: `${prefix}close`,
+        delete: `${prefix}close-circle`,
+        // delete (e.g. v-chip close)
+        clear: `${prefix}close-circle`,
+        success: `${prefix}check-circle`,
+        info: `${prefix}information`,
+        warning: `${prefix}alert-circle`,
+        error: `${prefix}close-circle`,
+        prev: `${prefix}chevron-left`,
+        next: `${prefix}chevron-right`,
+        checkboxOn: `${prefix}checkbox-marked`,
+        checkboxOff: `${prefix}checkbox-blank-outline`,
+        checkboxIndeterminate: `${prefix}minus-box`,
+        delimiter: `${prefix}circle`,
+        // for carousel
+        sortAsc: `${prefix}arrow-up`,
+        sortDesc: `${prefix}arrow-down`,
+        expand: `${prefix}chevron-down`,
+        menu: `${prefix}menu`,
+        subgroup: `${prefix}menu-down`,
+        dropdown: `${prefix}menu-down`,
+        radioOn: `${prefix}radiobox-marked`,
+        radioOff: `${prefix}radiobox-blank`,
+        edit: `${prefix}pencil`,
+        ratingEmpty: `${prefix}star-outline`,
+        ratingFull: `${prefix}star`,
+        ratingHalf: `${prefix}star-half-full`,
+        loading: `${prefix}cached`,
+        first: `${prefix}page-first`,
+        last: `${prefix}page-last`,
+        unfold: `${prefix}unfold-more-horizontal`,
+        file: `${prefix}paperclip`,
+        plus: `${prefix}plus`,
+        minus: `${prefix}minus`,
+        calendar: `${prefix}calendar`
+      })}
 `;
     }
     return {
+      unocss,
       fa: resolvedIcons.svg?.fa ?? [],
       defaultSet: resolvedIcons.defaultSet,
       imports: Object.values(resolvedIcons.imports).join("\n"),
@@ -647,7 +717,7 @@ const module = defineNuxtModule({
       }
     }
     nuxt.options.build.transpile.push(CONFIG_KEY);
-    const icons = prepareIcons(logger, vuetifyOptions);
+    const icons = prepareIcons(hasNuxtModule("@unocss/nuxt"), logger, vuetifyOptions);
     (_a = nuxt.options).css ?? (_a.css = []);
     if (typeof styles === "string" && ["sass", "expose"].includes(styles))
       nuxt.options.css.unshift("vuetify/styles/main.sass");

package/dist/runtime/plugins/config.mjs

@@ -5,6 +5,7 @@ export async function configureVuetify() {
   const nuxtApp = useNuxtApp();
   const vuetifyOptions = vuetifyConfiguration();
   await nuxtApp.hooks.callHook("vuetify:configuration", { isDev, vuetifyOptions });
+  await nuxtApp.hooks.callHook("vuetify:before-create", { isDev, vuetifyOptions });
   const vuetify = createVuetify(vuetifyOptions);
   nuxtApp.vueApp.use(vuetify);
   nuxtApp.provide("vuetify", vuetify);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "vuetify-nuxt-module",
   "type": "module",
-  "version": "0.4.4",
-  "packageManager": "pnpm@8.6.7",
+  "version": "0.4.6",
+  "packageManager": "pnpm@8.6.8",
   "description": "Zero-Config Nuxt Module for Vuetify",
   "author": "userquin <userquin@gmail.com>",
   "license": "MIT",
@@ -46,6 +46,9 @@
     "dev:build:multiple-json": "MULTIPLE_LANG_FILES=true nuxi build playground",
     "dev:generate:multiple-json": "MULTIPLE_LANG_FILES=true nuxi generate playground",
     "dev:preview": "nuxi preview playground",
+    "docs:dev": "pnpm -C docs run dev",
+    "docs:build": "pnpm dev:prepare && pnpm -C docs run build",
+    "docs:serve": "pnpm -C docs run serve",
     "lint": "eslint .",
     "lint:fix": "nr lint --fix",
     "test": "vitest run",
@@ -71,6 +74,8 @@
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@iconify-json/carbon": "^1.1.18",
+    "@iconify-json/mdi": "^1.1.53",
     "@mdi/js": "^7.2.96",
     "@nuxt/devtools": "^0.6.7",
     "@nuxt/module-builder": "^0.4.0",
@@ -79,6 +84,7 @@
     "@nuxtjs/i18n": "^8.0.0-beta.13",
     "@parcel/watcher": "^2.1.0",
     "@types/node": "^18",
+    "@unocss/nuxt": "^0.53.5",
     "bumpp": "^9.1.1",
     "eslint": "^8.43.0",
     "luxon": "^3.3.0",
@@ -108,6 +114,11 @@
   "pnpm": {
     "patchedDependencies": {
       "@nuxtjs/i18n@8.0.0-beta.13": "patches/@nuxtjs__i18n@8.0.0-beta.13.patch"
+    },
+    "peerDependencyRules": {
+      "ignoreMissing": [
+        "@algolia/client-search"
+      ]
     }
   },
   "stackblitz": {