vuetify-nuxt-module 0.2.2 → 0.2.3

package/README.md

@@ -1,261 +1,287 @@
-<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://vite-pwa-org.netlify.app/frameworks/nuxt" 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**](README.md#-features) (WIP)
-- 👌 **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
-- 😃 **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
-- 🎨 **Vuetify Blueprints (WIP)**: use [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
-- 🦾 **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.ts
-import { defineNuxtConfig } from 'nuxt/config'
-
-export default defineNuxtConfig({
-  modules: [
-    'vuetify-nuxt-module'
-  ],
-  vuetify: {
-    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
-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
-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)
-
-### mdi-svg
-
-You only need to add `@mdi/js` dependency to your project and configure the default set:
-```ts
-vuetify: {
-  vuetifyOptions: {
-    icons: {
-      defaultSet: 'mdi-svg'
-    }
-  }
-}
-```
-
-You can also add icon aliases:
-```ts
-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
-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
-vuetify: {
-  vuetifyOptions: {
-    icons: {
-      defaultSet: 'fa-svg',
-      svg: {
-        fa: {
-          libraries: [/* default export? */ false, /* export name */ 'fas', /* import */ '@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
-vuetify: {
-  vuetifyOptions: {
-    icons: {
-      defaultSet: 'mdi'
-      sets: [{ name: 'mdi' }, { name: '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](./src/runtime/plugins/vuetify-date.mts) plugin for an example of a custom date adapter and how to access to the configuration.
-
-## 🎨 Vuetify Blueprints
-
-**WIP**
-
-## 👀 Full config
-
-Check out the type declaration [src/types.ts](./src/types.ts).
-
-The virtual modules can be found in [configuration.d.ts](./configuration.d.ts) file.
-
-## 📄 License
-
-[MIT](./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://vite-pwa-org.netlify.app/frameworks/nuxt" 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
+
+- 👌 **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
+- 😃 **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 (WIP)**: use [Vuetify Blueprints](https://vuetifyjs.com/en/features/blueprints/) to quickly scaffold components
+- 🦾 **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.ts
+import { defineNuxtConfig } from 'nuxt/config'
+
+export default defineNuxtConfig({
+  modules: [
+    'vuetify-nuxt-module'
+  ],
+  vuetify: {
+    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
+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
+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
+vuetify: {
+  vuetifyOptions: {
+    icons: {
+      defaultSet: 'mdi-svg'
+    }
+  }
+}
+```
+
+You can also add icon aliases:
+```ts
+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
+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
+vuetify: {
+  vuetifyOptions: {
+    icons: {
+      defaultSet: 'fa-svg',
+      svg: {
+        fa: {
+          libraries: [/* default export? */ false, /* export name */ 'fas', /* import */ '@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
+vuetify: {
+  vuetifyOptions: {
+    icons: {
+      defaultSet: 'mdi'
+      sets: [{ name: 'mdi' }, { name: '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](./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
+
+**WIP**
+
+## 👀 Full config
+
+Check out the type declaration [src/types.ts](./src/types.ts).
+
+The virtual modules can be found in [configuration.d.ts](./configuration.d.ts) file.
+
+## 📄 License
+
+[MIT](./LICENSE) License &copy; 2023-PRESENT [Joaquín Sánchez](https://github.com/userquin)

package/dist/module.d.ts

@@ -112,17 +112,35 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
      */
     icons?: false | IconsOptions;
 }
-interface ModuleOptions {
-    moduleOptions?: {
-        /**
-         * Vuetify styles.
-         *
-         * @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
-         */
-        styles?: true | 'none' | 'expose' | 'sass' | {
-            configFile: string;
-        };
+interface MOptions {
+    /**
+     * @default true
+     */
+    importComposables?: boolean;
+    /**
+     * If you are using another composables that collide with the Vuetify ones,
+     * enable this flag to prefix them with `V`:
+     * - `useLocale` -> `useVLocale`
+     * - `useDefaults` -> `useVDefaults`
+     * - `useDisplay` -> `useVDisplay`
+     * - `useLayout` -> `useVLayout`
+     * - `useRtl` -> `useVRtl`
+     * - `useTheme` -> `useVTheme`
+     *
+     * @default false
+     */
+    prefixComposables?: boolean;
+    /**
+     * Vuetify styles.
+     *
+     * @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
+     */
+    styles?: true | 'none' | 'expose' | 'sass' | {
+        configFile: string;
     };
+}
+interface ModuleOptions {
+    moduleOptions?: MOptions;
     /**
      * Vuetify options.
      */
@@ -142,4 +160,4 @@ declare module '#app' {
 
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
 
-export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, ModuleOptions, VOptions, _default as default };
+export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, MOptions, ModuleOptions, VOptions, _default as default };

package/dist/module.json

@@ -4,5 +4,5 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.2.2"
+  "version": "0.2.3"
 }

package/dist/module.mjs

@@ -1,12 +1,12 @@
 import { utimes, readFile } from 'node:fs/promises';
-import { useLogger, defineNuxtModule, createResolver, hasNuxtModule, extendWebpackConfig, addPlugin } from '@nuxt/kit';
+import { useLogger, defineNuxtModule, createResolver, hasNuxtModule, extendWebpackConfig, addImports, addPlugin } from '@nuxt/kit';
 import defu from 'defu';
 import { isPackageExists } from 'local-pkg';
 import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vuetify/loader-shared';
 import { isAbsolute, join, relative } from 'pathe';
 import { normalizePath as normalizePath$1 } from 'vite';
 
-const version = "0.2.2";
+const version = "0.2.3";
 
 function isSubdir(root, test) {
   const relative$1 = relative(root, test);
@@ -483,23 +483,29 @@ const module = defineNuxtModule({
       directives: false
     },
     moduleOptions: {
+      importComposables: true,
       styles: true
     }
   }),
   setup(options, nuxt) {
     var _a, _b;
     const resolver = createResolver(import.meta.url);
-    const { moduleOptions = {}, vuetifyOptions = {} } = options;
+    const { vuetifyOptions = {} } = options;
     const {
       directives = false,
       labComponents = false,
       ...vOptions
     } = vuetifyOptions;
+    const moduleOptions = defu(options.moduleOptions ?? {}, {
+      styles: true,
+      importComposables: true,
+      prefixComposables: false
+    });
     const isSSR = nuxt.options.ssr;
     const vuetifyAppOptions = defu(vOptions, {
       ssr: isSSR
     });
-    const { styles = true } = moduleOptions;
+    const { styles } = moduleOptions;
     const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
     let dateAdapter;
     const dateOptions = vuetifyOptions.date;
@@ -552,7 +558,6 @@ const module = defineNuxtModule({
     nuxt.hook("vite:extend", ({ config }) => checkVuetifyPlugins(config));
     nuxt.hook("prepare:types", ({ references }) => {
       references.push({ types: "vuetify-nuxt-module/configuration" });
-      references.push({ types: "vuetify" });
     });
     const vuetifyBase = resolveVuetifyBase();
     nuxt.hook("components:extend", async (c) => {
@@ -563,6 +568,7 @@ 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),
@@ -573,6 +579,15 @@ const module = defineNuxtModule({
         });
       });
     });
+    if (moduleOptions.importComposables) {
+      const composables = ["useLocale", "useDefaults", "useDisplay", "useLayout", "useRtl", "useTheme"];
+      addImports(composables.map((name) => ({
+        name,
+        from: "vuetify",
+        as: moduleOptions.prefixComposables ? name.replace(/^use/, "useV") : void 0,
+        meta: { docsUrl: `https://vuetifyjs.com/en/api/${toKebabCase(name)}/` }
+      })));
+    }
     nuxt.hook("vite:extendConfig", (viteInlineConfig) => {
       viteInlineConfig.plugins = viteInlineConfig.plugins || [];
       checkVuetifyPlugins(viteInlineConfig);

package/dist/types.d.ts

@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
 }
 
 
-export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, ModuleOptions, VOptions, default } from './module'
+export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, MOptions, ModuleOptions, VOptions, default } from './module'

package/package.json

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