vuetify-nuxt-module 0.0.3 β†’ 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,106 +1,255 @@
1
- <p align='center'>
2
- <img src='./hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify"><br>
3
- Zero-config Nuxt module for Vuetify
4
- </p>
5
-
6
- <p align='center'>
7
- <a href='https://www.npmjs.com/package/vuetify-nuxt-module' target="__blank">
8
- <img src='https://img.shields.io/npm/v/vuetify-nuxt-module?color=33A6B8&label=' alt="NPM version">
9
- </a>
10
- <a href="https://www.npmjs.com/package/vuetify-nuxt-module" target="__blank">
11
- <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/vuetify-nuxt-module?color=476582&label=">
12
- </a>
13
- <!--
14
- <a href="https://vite-pwa-org.netlify.app/frameworks/nuxt" target="__blank">
15
- <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides">
16
- </a>
17
- -->
18
- <br>
19
- <a href="https://github.com/userquin/vuetify-nuxt-module" target="__blank">
20
- <img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
21
- </a>
22
- </p>
23
-
24
- <br>
25
-
26
- ## πŸš€ Features
27
-
28
- - πŸ“– [**Documentation & guides**](README.md#-features) (WIP)
29
- - πŸ‘Œ **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
30
- - πŸ”© **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
31
- - ⚑ **Fully tree shakable**: by default, only the needed Vuetify components are imported
32
- - πŸ› οΈ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
33
- - ✨ **Configurable styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/)
34
- - πŸ’₯ **SSR**: automatic SSR detection and configuration
35
- - 🌍 **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
36
- - 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
37
-
38
- ## πŸ“¦ Install
39
-
40
- > Requires Vite, will not work with Webpack
41
-
42
- ```bash
43
- npm i vuetify-nuxt-module -D
44
-
45
- # yarn
46
- yarn add vuetify-nuxt-module -D
47
-
48
- # pnpm
49
- pnpm add vuetify-nuxt-module -D
50
- ```
51
-
52
- ## πŸ¦„ Usage
53
-
54
- > `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.
55
-
56
- Add `vuetify-nuxt-module` module to `nuxt.config.ts` and configure it:
57
-
58
- ```ts
59
- // nuxt.config.ts
60
- import { defineNuxtConfig } from 'nuxt/config'
61
-
62
- export default defineNuxtConfig({
63
- modules: [
64
- 'vuetify-nuxt-module'
65
- ],
66
- vuetify: {
67
- moduleOptions: {
68
- /* module specific options */
69
- },
70
- vuetifyOptions: {
71
- /* vuetify options */
72
- }
73
- }
74
- })
75
- ```
76
-
77
- ## 🌍 I18n support
78
-
79
- > Requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `8.0.0.beta.12`.
80
-
81
- There is a [bug](https://github.com/nuxt-modules/i18n/pull/2193) in the current version that prevents `@nuxtjs/i18n` module to work properly when using `lazy` i18n files.
82
-
83
- If you're using `lazy` i18n files per locale, apply [this patch](./patches/@nuxtjs__i18n@8.0.0-beta.12.patch) to your project: check how to apply it when using `pnpm` in the root `package.json` file in this repo: [./package.json#L25-L26](./package.json#L97-L101).
84
-
85
- You can check the playground folder, you can run it using single or multiple json files per locale:
86
- - for single file per locale: run from root folder `pnpm install && nr dev:prepare && nr dev`
87
- - for multiple files per locale: run from root folder `pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json`
88
-
89
- <!--
90
- Read the [πŸ“– documentation](https://vite-pwa-org.netlify.app/frameworks/nuxt) for a complete guide on how to configure and use
91
- this plugin.
92
- -->
93
-
94
- ## πŸ‘€ Full config
95
-
96
- **WIP**
97
- <!--
98
- Check out the type declaration [src/types.ts](./src/types.ts) and the following links for more details.
99
-
100
- - [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest)
101
- - [Workbox](https://developers.google.com/web/tools/workbox)
102
- -->
103
-
104
- ## πŸ“„ License
105
-
106
- [MIT](./LICENSE) License &copy; 2023-PRESENT [JoaquΓ­n SΓ‘nchez](https://github.com/userquin)
1
+ <p align='center'>
2
+ <img src='https://github.com/userquin/vuetify-nuxt-module/raw/main/hero.svg' alt="vuetify-nuxt-module - Zero-config Nuxt module for Vuetify"><br>
3
+ Zero-config Nuxt module for Vuetify
4
+ </p>
5
+
6
+ <p align='center'>
7
+ <a href='https://www.npmjs.com/package/vuetify-nuxt-module' target="__blank">
8
+ <img src='https://img.shields.io/npm/v/vuetify-nuxt-module?color=33A6B8&label=' alt="NPM version">
9
+ </a>
10
+ <a href="https://www.npmjs.com/package/vuetify-nuxt-module" target="__blank">
11
+ <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/vuetify-nuxt-module?color=476582&label=">
12
+ </a>
13
+ <!--
14
+ <a href="https://vite-pwa-org.netlify.app/frameworks/nuxt" target="__blank">
15
+ <img src="https://img.shields.io/static/v1?label=&message=docs%20%26%20guides&color=2e859c" alt="Docs & Guides">
16
+ </a>
17
+ -->
18
+ <br>
19
+ <a href="https://github.com/userquin/vuetify-nuxt-module" target="__blank">
20
+ <img alt="GitHub stars" src="https://img.shields.io/github/stars/userquin/vuetify-nuxt-module?style=social">
21
+ </a>
22
+ </p>
23
+
24
+ <br>
25
+
26
+ ## πŸš€ Features
27
+
28
+ - πŸ“– [**Documentation & guides**](README.md#-features) (WIP)
29
+ - πŸ‘Œ **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
30
+ - πŸ”© **Extensible**: expose the ability to customize the Vuetify configuration via [Nuxt Plugin Hooks](https://nuxt.com/docs/guide/going-further/hooks#usage-with-plugins)
31
+ - ⚑ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
32
+ - πŸ› οΈ **Versatile**: custom Vuetify [directives](https://vuetifyjs.com/en/getting-started/installation/#manual-steps) and [labs components](https://vuetifyjs.com/en/labs/introduction/) registration
33
+ - ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/)
34
+ - πŸ’₯ **SSR**: automatic SSR detection and configuration
35
+ - πŸ˜ƒ **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
36
+ - 🎨 **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
37
+ - πŸ“¦ **Multiple Icon Sets**: register [multiple icon sets](https://vuetifyjs.com/en/features/icon-fonts/#multiple-icon-sets)
38
+ - 🌍 **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
39
+ - πŸ“† **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
40
+ - 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
41
+
42
+ ## πŸ“¦ Install
43
+
44
+ > Requires Vite, will not work with Webpack
45
+
46
+ ```bash
47
+ npm i vuetify-nuxt-module -D
48
+
49
+ # yarn
50
+ yarn add vuetify-nuxt-module -D
51
+
52
+ # pnpm
53
+ pnpm add vuetify-nuxt-module -D
54
+ ```
55
+
56
+ [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/userquin/vuetify-nuxt-module)
57
+
58
+ ## πŸ¦„ Usage
59
+
60
+ > `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.
61
+
62
+ Add `vuetify-nuxt-module` module to `nuxt.config.ts` and configure it:
63
+
64
+ ```ts
65
+ // nuxt.config.ts
66
+ import { defineNuxtConfig } from 'nuxt/config'
67
+
68
+ export default defineNuxtConfig({
69
+ modules: [
70
+ 'vuetify-nuxt-module'
71
+ ],
72
+ vuetify: {
73
+ moduleOptions: {
74
+ /* module specific options */
75
+ },
76
+ vuetifyOptions: {
77
+ /* vuetify options */
78
+ }
79
+ }
80
+ })
81
+ ```
82
+
83
+ ## πŸ˜ƒ Font Icons
84
+
85
+ This module supports the following font icons libraries:
86
+ - [Material Design Icons](https://materialdesignicons.com/)
87
+ - [Material Icons](https://fonts.google.com/icons)
88
+ - [Font Awesome 4](https://fontawesome.com/v4.7.0/)
89
+ - [Font Awesome 5](https://fontawesome.com/)
90
+
91
+ By default, the module will use the `mdi` font icon library. You can change it by setting the `defaultSet` option to:
92
+ - `mdi` for [Material Design Icons](https://materialdesignicons.com/)
93
+ - `md` for [Material Icons](https://fonts.google.com/icons)
94
+ - `fa4` for [Font Awesome 4](https://fontawesome.com/v4.7.0/)
95
+ - `fa` for [Font Awesome 5](https://fontawesome.com)
96
+
97
+ To configure a font icon you only need to specify the default set:
98
+ ```ts
99
+ vuetify: {
100
+ vuetifyOptions: {
101
+ icons: {
102
+ defaultSet: 'mdi'
103
+ }
104
+ }
105
+ }
106
+ ```
107
+
108
+ 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.
109
+
110
+ The CDN used for each font icon library, you can use the `cdn` option to change it:
111
+ - [CDN for Material Design Icons (mdi)](https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css)
112
+ - [CDN for Material Icons (md)](https://fonts.googleapis.com/css?family=Material+Icons)
113
+ - [CDN for Font Awesome 4 (fa4)](https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css)
114
+ - [CDN for Font Awesome 5 (fa)](https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css)
115
+
116
+ To change the CDN for a font icon library you only need to specify the `cdn` option:
117
+ ```ts
118
+ vuetify: {
119
+ vuetifyOptions: {
120
+ icons: {
121
+ defaultSet: 'mdi'
122
+ sets: [{
123
+ name: 'mdi',
124
+ cdn: 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons'
125
+ }]
126
+ }
127
+ }
128
+ }
129
+ ```
130
+
131
+ ## 🎨 SVG Icons
132
+
133
+ This module supports the following SVG icon libraries:
134
+ - [@mdi/js](https://www.npmjs.com/package/@mdi/js)
135
+ - [@fortawesome/fontawesome-svg-core](https://www.npmjs.com/package/@fortawesome/fontawesome-svg-core)
136
+
137
+ ### mdi-svg
138
+
139
+ You only need to add `@mdi/js` dependency to your project and configure the default set:
140
+ ```ts
141
+ vuetify: {
142
+ vuetifyOptions: {
143
+ icons: {
144
+ defaultSet: 'mdi-svg'
145
+ }
146
+ }
147
+ }
148
+ ```
149
+
150
+ You can also add icon aliases:
151
+ ```ts
152
+ vuetify: {
153
+ vuetifyOptions: {
154
+ icons: {
155
+ defaultSet: 'mdi-svg',
156
+ svg: {
157
+ mdi: {
158
+ account: 'mdiAccount'
159
+ }
160
+ }
161
+ }
162
+ }
163
+ }
164
+ ```
165
+
166
+ ### fa-svg
167
+
168
+ 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:
169
+ ```ts
170
+ vuetify: {
171
+ vuetifyOptions: {
172
+ icons: {
173
+ defaultSet: 'fa-svg'
174
+ }
175
+ }
176
+ }
177
+ ```
178
+
179
+ 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):
180
+ ```ts
181
+ vuetify: {
182
+ vuetifyOptions: {
183
+ icons: {
184
+ defaultSet: 'fa-svg',
185
+ svg: {
186
+ fa: {
187
+ libraries: [/* default export? */ false, /* export name */ 'fas', /* import */ '@fortawesome/free-solid-svg-icons']
188
+ }
189
+ }
190
+ }
191
+ }
192
+ }
193
+ ```
194
+
195
+ ## πŸ“¦ Multiple Icon Sets
196
+
197
+ 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:
198
+ ```ts
199
+ vuetify: {
200
+ vuetifyOptions: {
201
+ icons: {
202
+ defaultSet: 'mdi'
203
+ sets: [{ name: 'mdi' }, { name: 'fa' }]
204
+ }
205
+ }
206
+ }
207
+ ```
208
+
209
+ ## 🌍 I18n support
210
+
211
+ > Requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `8.0.0.beta.13`.
212
+
213
+ You can check the playground folder, you can run it using single or multiple json files per locale:
214
+ - for single file per locale: run from root folder `pnpm install && nr dev:prepare && nr dev`
215
+ - for multiple files per locale: run from root folder `pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json`
216
+
217
+ ## πŸ“† Date components support
218
+
219
+ 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.
220
+
221
+ To use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/):
222
+ - install one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters (optional)
223
+ - configure the date entry in your Vuetify configuration:
224
+ ```ts
225
+ vuetifyOptions: {
226
+ date: {
227
+ adapter: 'vuetify' // 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
228
+ }
229
+ }
230
+ ```
231
+
232
+ If you also have `@nuxtjs/i18n` module installed, `vuetifyOptions.date.locale` will be automatically configured, beware, the configured `locale` entry will be ignored.
233
+
234
+ If you want to use a custom date adapter, you can configure it using `vuetifyOptions.date.adapter = 'custom'`, and then:
235
+ - add a Nuxt Plugin and add the `vuetify:configuration` hook to configure your Vuetify options
236
+ - you can import the `virtual:vuetify-date-configuration` module, you will have access to the configuration:
237
+ ```ts
238
+ import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
239
+ ```
240
+
241
+ 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.
242
+
243
+ ## πŸ‘€ Full config
244
+
245
+ **WIP**
246
+ <!--
247
+ Check out the type declaration [src/types.ts](./src/types.ts) and the following links for more details.
248
+
249
+ - [Web app manifests](https://developer.mozilla.org/en-US/docs/Web/Manifest)
250
+ - [Workbox](https://developers.google.com/web/tools/workbox)
251
+ -->
252
+
253
+ ## πŸ“„ License
254
+
255
+ [MIT](./LICENSE) License &copy; 2023-PRESENT [JoaquΓ­n SΓ‘nchez](https://github.com/userquin)
@@ -2,5 +2,21 @@ declare module 'virtual:vuetify-configuration' {
2
2
  import type { VuetifyOptions } from 'vuetify';
3
3
 
4
4
  export const isDev: boolean
5
- export const vuetifyConfiguration: () => VuetifyOptions
5
+ export function vuetifyConfiguration(): VuetifyOptions
6
+ }
7
+
8
+ declare module 'virtual:vuetify-date-configuration' {
9
+ import type { DateOptions } from 'vuetify';
10
+
11
+ export const isDev: boolean
12
+ export const i18n: boolean
13
+ export const adapter: 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
14
+ export function dateConfiguration(): DateOptions
15
+ }
16
+
17
+ declare module 'virtual:vuetify-icons-configuration' {
18
+ import type { IconOptions } from 'vuetify'
19
+
20
+ export const isDev: boolean
21
+ export function iconsConfiguration(): IconOptions
6
22
  }
package/dist/module.d.ts CHANGED
@@ -2,7 +2,75 @@ import * as _nuxt_schema from '@nuxt/schema';
2
2
  import { VuetifyOptions } from 'vuetify';
3
3
 
4
4
  type BooleanOrArrayString = boolean | string[];
5
- interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date'>> {
5
+ type DateAdapter = 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom';
6
+ /**
7
+ * Date configuration.
8
+ */
9
+ interface DateOptions {
10
+ /**
11
+ * The date adapter.
12
+ *
13
+ * The adapter will be picked from the dependencies.
14
+ * When multiple `@date-io/xxxx` libraries installed in your project,
15
+ * you should specify the adapter otherwise an error will be thrown.
16
+ *
17
+ * If you want to use a custom adapter, configure `adapter: 'custom'`,
18
+ * and then add a Nuxt plugin to configure the adapter using `vuetify:configuration` hook.
19
+ *
20
+ * @default 'vuetify'
21
+ */
22
+ adapter?: DateAdapter;
23
+ /**
24
+ * Formats.
25
+ */
26
+ formats?: Record<string, string>;
27
+ /**
28
+ * Locales.
29
+ *
30
+ * When `@nuxtjs/i18n` Nuxt module is present, this option will be ignored, locales will be extracted from the available locales.
31
+ */
32
+ locale: Record<string, any>;
33
+ }
34
+ type IconSetName = 'mdi' | 'fa' | 'fa4' | 'md' | 'mdi-svg' | 'fa-svg' | 'custom';
35
+ interface IconSet {
36
+ name: IconSetName;
37
+ }
38
+ interface JSSVGIconSet extends IconSet {
39
+ aliases?: Record<string, string>;
40
+ }
41
+ interface FontAwesomeSvgIconSet extends IconSet {
42
+ /**
43
+ * The libraries to import and the corresponding name.
44
+ *
45
+ * For example, to import free svg icons, `libraries` should be (the default):
46
+ * `libraries: [[false, 'fas', 'import { fas } from \'@fortawesome/free-solid-svg-icons\'']]
47
+ *
48
+ * @default [[false, 'fas', 'import { fas } from \'@fortawesome/free-solid-svg-icons\'']]
49
+ */
50
+ libraries?: [defaultExport: boolean, name: string, statement: string][];
51
+ }
52
+ interface FontIconSet extends IconSet {
53
+ /**
54
+ * Use CDN?
55
+ *
56
+ * - mdi: https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons
57
+ * - md: https://fonts.googleapis.com/css?family=Material+Icons
58
+ * - fa: https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css
59
+ * - fa4: https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css
60
+ *
61
+ * @default the corresponding CDN for the icon set
62
+ */
63
+ cdn?: string;
64
+ }
65
+ interface IconsOptions {
66
+ defaultSet: IconSetName;
67
+ sets?: FontIconSet[];
68
+ svg?: {
69
+ mdi?: JSSVGIconSet;
70
+ fa?: FontAwesomeSvgIconSet;
71
+ };
72
+ }
73
+ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date' | 'icons'>> {
6
74
  /**
7
75
  * Include the lab components?
8
76
  *
@@ -25,21 +93,49 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
25
93
  * @default false
26
94
  */
27
95
  directives?: BooleanOrArrayString;
96
+ /**
97
+ * Date configuration.
98
+ *
99
+ * When this option is configured, the `v-date-picker` lab component will be included.
100
+ *
101
+ * @see https://vuetifyjs.com/features/dates/
102
+ * @see https://vuetifyjs.com/components/date-pickers/
103
+ */
104
+ date?: DateOptions;
105
+ /**
106
+ * Include the icons?
107
+ *
108
+ * By default, `mdi` icons will be used via cdn: https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css.
109
+ *
110
+ * @see https://vuetifyjs.com/en/features/icon-fonts/
111
+ */
112
+ icons?: false | IconsOptions;
28
113
  }
29
114
  interface ModuleOptions {
30
115
  moduleOptions?: {
116
+ /**
117
+ * Vuetify styles.
118
+ *
119
+ * @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
120
+ */
31
121
  styles?: true | 'none' | 'expose' | 'sass' | {
32
122
  configFile: string;
33
123
  };
34
124
  };
125
+ /**
126
+ * Vuetify options.
127
+ */
35
128
  vuetifyOptions?: VOptions;
36
129
  }
37
130
  declare module '#app' {
38
131
  interface RuntimeNuxtHooks {
39
- 'vuetify:configuration': (isDev: boolean, vuetifyOptions: VuetifyOptions) => Promise<void> | void;
132
+ 'vuetify:configuration': (options: {
133
+ isDev: boolean;
134
+ vuetifyOptions: VuetifyOptions;
135
+ }) => Promise<void> | void;
40
136
  }
41
137
  }
42
138
 
43
139
  declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
44
140
 
45
- export { BooleanOrArrayString, ModuleOptions, VOptions, _default as default };
141
+ export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, ModuleOptions, VOptions, _default as default };
package/dist/module.json CHANGED
@@ -4,5 +4,5 @@
4
4
  "compatibility": {
5
5
  "nuxt": "^3.0.0"
6
6
  },
7
- "version": "0.0.3"
7
+ "version": "0.2.0"
8
8
  }
package/dist/module.mjs CHANGED
@@ -1,19 +1,20 @@
1
- import { useLogger, defineNuxtModule, createResolver, extendWebpackConfig, addPlugin, hasNuxtModule } from '@nuxt/kit';
1
+ import { useLogger, defineNuxtModule, createResolver, hasNuxtModule, extendWebpackConfig, addPlugin } from '@nuxt/kit';
2
2
  import defu from 'defu';
3
3
  import vuetify from 'vite-plugin-vuetify';
4
+ import { isPackageExists } from 'local-pkg';
4
5
  import { utimes } from 'node:fs/promises';
5
6
  import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vuetify/loader-shared';
6
7
  import { isAbsolute, join, relative } from 'pathe';
7
8
  import { normalizePath as normalizePath$1 } from 'vite';
8
9
 
9
- const version = "0.0.3";
10
+ const version = "0.2.0";
10
11
 
11
12
  function isSubdir(root, test) {
12
13
  const relative$1 = relative(root, test);
13
14
  return relative$1 && !relative$1.startsWith("..") && !isAbsolute(relative$1);
14
15
  }
15
16
  const styleImportRegexp = /(@use |meta\.load-css\()['"](vuetify(?:\/lib)?(?:\/styles(?:\/main(?:\.sass)?)?)?)['"]/;
16
- function stylesPlugin(options, logger) {
17
+ function vuetifyStylesPlugin(options, logger) {
17
18
  const vuetifyBase = resolveVuetifyBase();
18
19
  const files = /* @__PURE__ */ new Set();
19
20
  let server;
@@ -177,9 +178,20 @@ function stylesPlugin(options, logger) {
177
178
  };
178
179
  }
179
180
 
181
+ const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
182
+ const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_CONFIGURATION.slice("virtual:".length)}`;
183
+ const VIRTUAL_VUETIFY_DATE_CONFIGURATION = "virtual:vuetify-date-configuration";
184
+ const RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_DATE_CONFIGURATION.slice("virtual:".length)}`;
185
+ const VIRTUAL_VUETIFY_ICONS_CONFIGURATION = "virtual:vuetify-icons-configuration";
186
+ const RESOLVED_VIRTUAL_VUETIFY_ICONS_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_ICONS_CONFIGURATION.slice("virtual:".length)}`;
187
+
180
188
  function vuetifyConfigurationPlugin(isDev, directives, labComponents, vuetifyAppOptions) {
181
- const VIRTUAL_VUETIFY_CONFIGURATION = "virtual:vuetify-configuration";
182
- const RESOLVED_VIRTUAL_VUETIFY_CONFIGURATION = `/@nuxt-vuetify-configuration/${VIRTUAL_VUETIFY_CONFIGURATION.slice("virtual:".length)}`;
189
+ const {
190
+ directives: _directives,
191
+ date: _date,
192
+ icons: _icons,
193
+ ...newVuetifyOptions
194
+ } = vuetifyAppOptions;
183
195
  return {
184
196
  name: "vuetify:configuration:nuxt",
185
197
  enforce: "pre",
@@ -196,7 +208,7 @@ ${labComponentsResult.imports}
196
208
 
197
209
  export const isDev = ${isDev}
198
210
  export function vuetifyConfiguration() {
199
- const options = ${JSON.stringify(vuetifyAppOptions)}
211
+ const options = ${JSON.stringify(newVuetifyOptions)}
200
212
  ${directivesResult.expression}
201
213
  ${labComponentsResult.expression}
202
214
  return options
@@ -221,7 +233,8 @@ export function vuetifyConfiguration() {
221
233
  }
222
234
  }
223
235
  function buildLabComponents() {
224
- if (!labComponents)
236
+ const dateOptions = vuetifyAppOptions.date;
237
+ if (!labComponents && !dateOptions)
225
238
  return { imports: "", expression: "" };
226
239
  if (typeof labComponents === "boolean") {
227
240
  return {
@@ -229,14 +242,223 @@ export function vuetifyConfiguration() {
229
242
  expression: "options.components = labsComponents"
230
243
  };
231
244
  } else {
245
+ const components = [...new Set(dateOptions ? ["VDatePicker", ...labComponents] : labComponents)];
232
246
  return {
233
- imports: `${labComponents.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
234
- expression: `options.components = {${labComponents.join(",")}}`
247
+ imports: `${components.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
248
+ expression: `options.components = {${components.join(",")}}`
235
249
  };
236
250
  }
237
251
  }
238
252
  }
239
253
 
254
+ function vuetifyDateConfigurationPlugin(isDev, i18n, dateAdapter, dateOptions) {
255
+ const { adapter: _adapter, ...newDateOptions } = dateOptions;
256
+ return {
257
+ name: "vuetify:date-configuration:nuxt",
258
+ enforce: "pre",
259
+ resolveId(id) {
260
+ if (id === VIRTUAL_VUETIFY_DATE_CONFIGURATION)
261
+ return RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION;
262
+ },
263
+ async load(id) {
264
+ if (id === RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION) {
265
+ const imports = dateAdapter === "vuetify" ? "import { VuetifyDateAdapter } from 'vuetify/labs/date/adapters/vuetify'" : dateAdapter === "custom" ? "" : `import Adapter from '@date-io/${dateAdapter}'`;
266
+ return `${imports}
267
+ export const isDev = ${isDev}
268
+ export const i18n = ${i18n}
269
+ export const adapter = '${dateAdapter}'
270
+ export function dateConfiguration() {
271
+ const options = ${JSON.stringify(newDateOptions)}
272
+ ${buildAdapter()}
273
+ return options
274
+ }
275
+ `;
276
+ }
277
+ }
278
+ };
279
+ function buildAdapter() {
280
+ if (dateAdapter === "custom")
281
+ return "";
282
+ if (dateAdapter === "vuetify")
283
+ return "options.adapter = VuetifyDateAdapter";
284
+ return "options.adapter = Adapter";
285
+ }
286
+ }
287
+
288
+ const cssFonts = ["mdi", "md", "fa", "fa4"];
289
+ const iconsPackageNames = {
290
+ mdi: { name: "@mdi/font", css: "@mdi/font/css/materialdesignicons.css" },
291
+ md: { name: "material-design-icons-iconfont", css: "@mdi/font/css/materialdesignicons.css" },
292
+ fa: { name: "@fortawesome/fontawesome-free", css: "@fortawesome/fontawesome-free/css/all.css" },
293
+ fa4: { name: "font-awesome@4.7.0", css: "font-awesome/css/font-awesome.min.css" }
294
+ };
295
+ const iconsCDN = {
296
+ mdi: "https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css",
297
+ md: "https://fonts.googleapis.com/css?family=Material+Icons",
298
+ fa: "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@latest/css/all.min.css",
299
+ fa4: "https://cdn.jsdelivr.net/npm/font-awesome@4.x/css/font-awesome.min.css"
300
+ };
301
+ function prepareIcons(logger, vuetifyOptions) {
302
+ if (vuetifyOptions.icons === false)
303
+ return { enabled: false };
304
+ vuetifyOptions.icons = vuetifyOptions.icons ?? {};
305
+ let { defaultSet = "mdi", sets } = vuetifyOptions.icons;
306
+ if (!defaultSet)
307
+ defaultSet = vuetifyOptions.icons.defaultSet = "mdi";
308
+ if (!sets)
309
+ sets = [{ name: defaultSet || "mdi" }];
310
+ const resolvedIcons = {
311
+ enabled: true,
312
+ defaultSet,
313
+ sets: [],
314
+ aliases: [],
315
+ imports: [],
316
+ cdn: [],
317
+ local: [],
318
+ svg: {
319
+ mdi: false
320
+ }
321
+ };
322
+ sets.filter((s) => cssFonts.includes(s.name)).map((s) => s.name).forEach((name) => {
323
+ resolvedIcons.imports.push(`import {${name === defaultSet ? "aliases," : ""}${name}} from 'vuetify/iconsets/${name}'`);
324
+ resolvedIcons.sets.push(name);
325
+ if (isPackageExists(iconsPackageNames[name].name))
326
+ resolvedIcons.local.push(iconsPackageNames[name].css);
327
+ else
328
+ resolvedIcons.cdn.push(iconsCDN[name]);
329
+ });
330
+ let faSvg = vuetifyOptions.icons.svg?.fa;
331
+ if (defaultSet === "fa-svg" || faSvg) {
332
+ let faSvgExists = isPackageExists("@fortawesome/fontawesome-svg-core");
333
+ if (!faSvgExists)
334
+ logger.warn("Missing @fortawesome/fontawesome-svg-core dependency, install it!");
335
+ faSvgExists = isPackageExists("@fortawesome/vue-fontawesome");
336
+ if (faSvgExists) {
337
+ if (!faSvg?.libraries?.length) {
338
+ faSvg = faSvg || {};
339
+ faSvg.libraries = [[false, "fas", "@fortawesome/free-solid-svg-icons"]];
340
+ }
341
+ for (const p in faSvg.libraries) {
342
+ const [_defaultExport, _name, library] = faSvg.libraries[p];
343
+ faSvgExists = isPackageExists(library);
344
+ if (!faSvgExists)
345
+ logger.warn(`Missing library ${library} dependency, install it!`);
346
+ }
347
+ } else {
348
+ logger.warn("Missing @fortawesome/vue-fontawesome dependency, install it!");
349
+ }
350
+ if (faSvgExists) {
351
+ resolvedIcons.imports.push(`import {${defaultSet === "fa-svg" ? "aliases," : ""}fa} from 'vuetify/iconsets/fa-svg'`);
352
+ resolvedIcons.imports.push("import { library } from '@fortawesome/fontawesome-svg-core'");
353
+ resolvedIcons.imports.push("import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'");
354
+ resolvedIcons.imports.push("import { useNuxtApp } from '#app'");
355
+ resolvedIcons.svg.fa = ["useNuxtApp().vueApp.component('font-awesome-icon', FontAwesomeIcon)"];
356
+ faSvg.libraries.forEach(([defaultExport, name, library]) => {
357
+ resolvedIcons.imports.push(`import ${defaultExport ? name : `{${name}}`} from '${library}'`);
358
+ resolvedIcons.svg.fa.push(`library.add(${name})`);
359
+ });
360
+ resolvedIcons.sets.push("fa");
361
+ if (defaultSet === "fa-svg")
362
+ resolvedIcons.defaultSet = "fa";
363
+ }
364
+ }
365
+ const mdiSvg = vuetifyOptions.icons.svg?.mdi;
366
+ if (defaultSet === "mdi-svg" || mdiSvg) {
367
+ const mdiSvgExists = isPackageExists("@mdi/js");
368
+ if (mdiSvgExists) {
369
+ resolvedIcons.svg.mdi = true;
370
+ resolvedIcons.imports.push(`import {${defaultSet === "mdi-svg" ? "aliases," : ""}mdi} from 'vuetify/iconsets/mdi-svg'`);
371
+ if (mdiSvg && mdiSvg.aliases) {
372
+ resolvedIcons.imports.push(`import {${Object.values(mdiSvg.aliases).join(",")}} from '@mdi/js'`);
373
+ Object.entries(mdiSvg.aliases).forEach(([alias, icon]) => {
374
+ resolvedIcons.aliases.push(`${alias}: ${icon}`);
375
+ });
376
+ }
377
+ resolvedIcons.sets.push("mdi");
378
+ if (defaultSet === "mdi-svg")
379
+ resolvedIcons.defaultSet = "mdi";
380
+ } else {
381
+ resolvedIcons.svg.mdi = false;
382
+ logger.warn("Missing @mdi/js dependency, install it!");
383
+ }
384
+ }
385
+ if (!resolvedIcons.local?.length && !resolvedIcons.cdn?.length && !resolvedIcons.svg?.mdi && !resolvedIcons.svg?.fa?.length) {
386
+ logger.warn("No icons found, icons disabled!");
387
+ return { enabled: false };
388
+ }
389
+ return resolvedIcons;
390
+ }
391
+
392
+ function vuetifyIconsPlugin(isDev, resolvedIcons) {
393
+ const iconsOptionsPromise = prepareIcons();
394
+ return {
395
+ name: "vuetify:icons-configuration:nuxt",
396
+ enforce: "pre",
397
+ resolveId(id) {
398
+ if (id === VIRTUAL_VUETIFY_ICONS_CONFIGURATION)
399
+ return RESOLVED_VIRTUAL_VUETIFY_ICONS_CONFIGURATION;
400
+ },
401
+ async load(id) {
402
+ if (id === RESOLVED_VIRTUAL_VUETIFY_ICONS_CONFIGURATION) {
403
+ if (!resolvedIcons.enabled) {
404
+ return `export const isDev = ${isDev}
405
+ export function iconsConfiguration() {
406
+ return { defaultSet: undefined }
407
+ }
408
+ `;
409
+ }
410
+ const { aliases, fa, defaultSet, imports, sets } = await iconsOptionsPromise;
411
+ if (!defaultSet) {
412
+ return `export const isDev = ${isDev}
413
+ export function iconsConfiguration() {
414
+ return { defaultSet: undefined }
415
+ }
416
+ `;
417
+ }
418
+ return `${imports}
419
+
420
+ export const isDev = ${isDev}
421
+ export function iconsConfiguration() {
422
+ ${fa.map((f) => ` ${f}`).join("\n")}
423
+ return {
424
+ defaultSet: '${defaultSet}',
425
+ ${aliases}
426
+ sets: { ${sets} }
427
+ }
428
+ }
429
+ `;
430
+ }
431
+ }
432
+ };
433
+ async function prepareIcons() {
434
+ if (!resolvedIcons.enabled) {
435
+ return {
436
+ defaultSet: void 0,
437
+ imports: "",
438
+ sets: "",
439
+ aliases: "",
440
+ fa: []
441
+ };
442
+ }
443
+ let aliases = "aliases,";
444
+ const alias = resolvedIcons.aliases;
445
+ if (alias.length) {
446
+ aliases = `aliases: {
447
+ ...aliases,
448
+ ${alias.join(",\n")}
449
+ },
450
+ `;
451
+ }
452
+ return {
453
+ fa: resolvedIcons.svg?.fa ?? [],
454
+ defaultSet: resolvedIcons.defaultSet,
455
+ imports: Object.values(resolvedIcons.imports).join("\n"),
456
+ sets: resolvedIcons.sets.join(","),
457
+ aliases
458
+ };
459
+ }
460
+ }
461
+
240
462
  const CONFIG_KEY = "vuetify";
241
463
  const logger = useLogger(`nuxt:${CONFIG_KEY}`);
242
464
  const module = defineNuxtModule({
@@ -257,23 +479,46 @@ const module = defineNuxtModule({
257
479
  }
258
480
  }),
259
481
  setup(options, nuxt) {
260
- var _a;
482
+ var _a, _b;
261
483
  const resolver = createResolver(import.meta.url);
262
- const { moduleOptions, vuetifyOptions } = options;
484
+ const { moduleOptions = {}, vuetifyOptions = {} } = options;
263
485
  const {
264
486
  directives = false,
265
487
  labComponents = false,
266
488
  ...vOptions
267
- } = vuetifyOptions ?? {};
489
+ } = vuetifyOptions;
268
490
  const isSSR = nuxt.options.ssr;
269
491
  const vuetifyAppOptions = defu(vOptions, {
270
492
  ssr: isSSR
271
493
  });
494
+ const { styles = true } = moduleOptions;
495
+ const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
496
+ let dateAdapter;
497
+ const dateOptions = vuetifyOptions.date;
498
+ if (dateOptions) {
499
+ const adapter = dateOptions.adapter;
500
+ const date = detectDate();
501
+ if (!adapter && date.length > 1)
502
+ throw new Error(`Multiple date adapters found: ${date.map((d) => `@date-io/${d[0]}`).join(", ")}, please specify the adapter to use in the "vuetifyOptions.date.adapter" option.`);
503
+ if (adapter) {
504
+ if (adapter === "vuetify" || adapter === "custom") {
505
+ dateAdapter = adapter;
506
+ } else {
507
+ if (date.find((d) => d[0] === adapter) === void 0)
508
+ logger.warn(`Ignoring Vuetify Date configuration, date adapter "@date-io/${adapter}" not installed!`);
509
+ else
510
+ dateAdapter = adapter;
511
+ }
512
+ } else if (date.length === 0) {
513
+ dateAdapter = "vuetify";
514
+ } else {
515
+ dateAdapter = date[0];
516
+ }
517
+ }
272
518
  const runtimeDir = resolver.resolve("./runtime");
273
519
  nuxt.options.build.transpile.push(runtimeDir);
274
520
  nuxt.options.build.transpile.push(CONFIG_KEY);
275
- const { styles = true } = moduleOptions ?? {};
276
- nuxt.options.build.transpile.push(CONFIG_KEY);
521
+ const icons = prepareIcons(logger, vuetifyOptions);
277
522
  (_a = nuxt.options).css ?? (_a.css = []);
278
523
  if (typeof styles === "string" && ["sass", "expose"].includes(styles))
279
524
  nuxt.options.css.unshift("vuetify/styles/main.sass");
@@ -281,8 +526,20 @@ const module = defineNuxtModule({
281
526
  nuxt.options.css.unshift("vuetify/styles");
282
527
  else if (typeof styles === "object" && styles?.configFile && typeof styles.configFile === "string")
283
528
  nuxt.options.css.unshift(styles.configFile);
529
+ if (icons.enabled) {
530
+ icons.local?.forEach((css) => nuxt.options.css.push(css));
531
+ if (icons.cdn?.length) {
532
+ (_b = nuxt.options.app.head).link ?? (_b.link = []);
533
+ icons.cdn.forEach((href) => nuxt.options.app.head.link.push({
534
+ rel: "stylesheet",
535
+ href,
536
+ type: "text/css",
537
+ crossorigin: "anonymous"
538
+ }));
539
+ }
540
+ }
284
541
  extendWebpackConfig(() => {
285
- throw new Error("Webpack is not supported yet: vuetify-nuxt-module module can only be used with Vite!");
542
+ throw new Error("Webpack is not supported: vuetify-nuxt-module module can only be used with Vite!");
286
543
  });
287
544
  nuxt.hook("vite:extend", ({ config }) => checkVuetifyPlugins(config));
288
545
  nuxt.hook("prepare:types", ({ references }) => {
@@ -300,22 +557,42 @@ const module = defineNuxtModule({
300
557
  ];
301
558
  const autoImportPlugin = vuetify({ styles: true, autoImport: true }).find((p) => p && typeof p === "object" && "name" in p && p.name === "vuetify:import");
302
559
  viteInlineConfig.plugins.push(autoImportPlugin);
303
- viteInlineConfig.plugins.push(stylesPlugin({ styles }, logger));
560
+ viteInlineConfig.plugins.push(vuetifyStylesPlugin({ styles }, logger));
304
561
  viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(
305
562
  nuxt.options.dev,
306
563
  directives,
307
564
  labComponents,
308
565
  vuetifyAppOptions
309
566
  ));
567
+ viteInlineConfig.plugins.push(vuetifyIconsPlugin(
568
+ nuxt.options.dev,
569
+ icons
570
+ ));
571
+ if (dateAdapter) {
572
+ viteInlineConfig.plugins.push(vuetifyDateConfigurationPlugin(
573
+ nuxt.options.dev,
574
+ i18n,
575
+ dateAdapter,
576
+ dateOptions
577
+ ));
578
+ }
310
579
  });
311
580
  addPlugin({
312
581
  src: resolver.resolve(runtimeDir, "plugins/vuetify.mts")
313
582
  });
314
- if (hasNuxtModule("@nuxtjs/i18n", nuxt)) {
583
+ addPlugin({
584
+ src: resolver.resolve(runtimeDir, "plugins/vuetify-icons.mts")
585
+ });
586
+ if (i18n) {
315
587
  addPlugin({
316
588
  src: resolver.resolve(runtimeDir, "plugins/vuetify-i18n.mts")
317
589
  });
318
590
  }
591
+ if (dateAdapter) {
592
+ addPlugin({
593
+ src: resolver.resolve(runtimeDir, "plugins/vuetify-date.mts")
594
+ });
595
+ }
319
596
  }
320
597
  });
321
598
  function checkVuetifyPlugins(config) {
@@ -326,5 +603,9 @@ function checkVuetifyPlugins(config) {
326
603
  if (plugin)
327
604
  throw new Error("Remove vite-plugin-vuetify plugin from Vite Plugins entry in Nuxt config file!");
328
605
  }
606
+ function detectDate() {
607
+ const result = [];
608
+ return result;
609
+ }
329
610
 
330
611
  export { module as default };
@@ -0,0 +1,22 @@
1
+ export declare function configureVuetify(): Promise<{
2
+ install: (app: import("vue").App<any>) => void;
3
+ defaults: import("vue").Ref<import("vuetify/lib/framework.mjs").DefaultsInstance>;
4
+ display: import("vuetify/lib/framework.mjs").DisplayInstance;
5
+ theme: import("vuetify/lib/framework.mjs").ThemeInstance & {
6
+ install: (app: import("vue").App<any>) => void;
7
+ };
8
+ icons: Record<string, any>;
9
+ locale: {
10
+ isRtl: import("vue").Ref<boolean>;
11
+ rtl: import("vue").Ref<Record<string, boolean>>;
12
+ rtlClasses: import("vue").Ref<string>;
13
+ name: string;
14
+ messages: import("vue").Ref<import("vuetify/lib/framework.mjs").LocaleMessages>;
15
+ current: import("vue").Ref<string>;
16
+ fallback: import("vue").Ref<string>;
17
+ t: (key: string, ...params: unknown[]) => string;
18
+ n: (value: number) => string;
19
+ provide: (props: import("vuetify/lib/framework.mjs").LocaleOptions) => import("vuetify/lib/framework.mjs").LocaleInstance;
20
+ };
21
+ date: Record<string, any>;
22
+ }>;
@@ -0,0 +1,14 @@
1
+ import { createVuetify } from "vuetify";
2
+ import { isDev, vuetifyConfiguration } from "virtual:vuetify-configuration";
3
+ import { useNuxtApp } from "#app";
4
+ export async function configureVuetify() {
5
+ const nuxtApp = useNuxtApp();
6
+ const vuetifyOptions = vuetifyConfiguration();
7
+ await nuxtApp.hooks.callHook("vuetify:configuration", { isDev, vuetifyOptions });
8
+ const vuetify = createVuetify(vuetifyOptions);
9
+ nuxtApp.vueApp.use(vuetify);
10
+ if (process.client) {
11
+ isDev && console.log("Vuetify 3 initialized", vuetify);
12
+ }
13
+ return vuetify;
14
+ }
@@ -0,0 +1,2 @@
1
+ import type { VuetifyOptions } from 'vuetify';
2
+ export declare function configureDate(vuetifyOptions: VuetifyOptions): void;
@@ -0,0 +1,17 @@
1
+ import { adapter, dateConfiguration, i18n } from "virtual:vuetify-date-configuration";
2
+ import { useNuxtApp } from "#app";
3
+ export function configureDate(vuetifyOptions) {
4
+ if (adapter === "custom")
5
+ return;
6
+ const dateOptions = dateConfiguration();
7
+ if (i18n) {
8
+ const locales = useNuxtApp().$i18n.locales.value;
9
+ if (locales) {
10
+ dateOptions.locale = locales.reduce((acc, locale) => {
11
+ acc[locale.code] = locale.code;
12
+ return acc;
13
+ }, {});
14
+ }
15
+ }
16
+ vuetifyOptions.date = dateOptions;
17
+ }
@@ -1,20 +1,2 @@
1
- import type { Ref } from 'vue';
2
- import type { LocaleMessages, LocaleOptions } from 'vuetify';
3
- import type { NuxtApp } from '#app';
4
- export declare function createAdapter(nuxtApp: NuxtApp): {
5
- name: string;
6
- current: any;
7
- fallback: any;
8
- messages: any;
9
- t: (key: string, ...params: unknown[]) => any;
10
- n: any;
11
- provide: (props: LocaleOptions) => {
12
- name: string;
13
- current: Ref<string>;
14
- fallback: Ref<string>;
15
- messages: Ref<LocaleMessages>;
16
- t: (key: string, ...params: unknown[]) => any;
17
- n: any;
18
- provide: any;
19
- };
20
- };
1
+ import type { VuetifyOptions } from 'vuetify';
2
+ export declare function createAdapter(vuetifyOptions: VuetifyOptions): void;
@@ -7,15 +7,21 @@ import {
7
7
  toRaw,
8
8
  watch
9
9
  } from "vue";
10
+ import { toKebabCase } from "../../utils";
10
11
  import { useI18n } from "#imports";
11
- export function createAdapter(nuxtApp) {
12
+ import { useNuxtApp } from "#app";
13
+ export function createAdapter(vuetifyOptions) {
14
+ vuetifyOptions.locale = {};
15
+ const nuxtApp = useNuxtApp();
12
16
  const i18n = nuxtApp.$i18n;
13
17
  const current = i18n.locale;
14
18
  const fallback = i18n.fallbackLocale;
15
19
  const messages = i18n.messages;
16
- watch(() => current, (l) => nuxtApp.$vuetify.locale.current.value = l);
17
- watch(() => nuxtApp.$vuetify?.locale?.current.value, (l) => i18n.setLocale(l));
18
- return {
20
+ vuetifyOptions.locale.rtl = i18n.locales.value.reduce((acc, locale) => {
21
+ acc[locale.code] = locale.dir === "rtl";
22
+ return acc;
23
+ }, {});
24
+ vuetifyOptions.locale.adapter = {
19
25
  name: "nuxt-vue-i18n",
20
26
  current,
21
27
  fallback,
@@ -31,14 +37,6 @@ function getCurrentInstance(name, message) {
31
37
  throw new Error(`[Vuetify] ${name} ${message || "must be called from inside a setup function"}`);
32
38
  return vm;
33
39
  }
34
- function toKebabCase(str = "") {
35
- if (toKebabCase.cache.has(str))
36
- return toKebabCase.cache.get(str);
37
- const kebab = str.replace(/[^a-z]/gi, "-").replace(/\B([A-Z])/g, "-$1").toLowerCase();
38
- toKebabCase.cache.set(str, kebab);
39
- return kebab;
40
- }
41
- toKebabCase.cache = /* @__PURE__ */ new Map();
42
40
  function useToggleScope(source, fn) {
43
41
  let scope;
44
42
  function start() {
@@ -120,7 +118,6 @@ function createProvideFunction(data) {
120
118
  legacy: false,
121
119
  inheritLocale: false
122
120
  });
123
- watch(current, (l) => i18n.locale.value = l);
124
121
  return {
125
122
  name: "nuxt-vue-i18n",
126
123
  current,
@@ -0,0 +1,2 @@
1
+ import type { VuetifyOptions } from 'vuetify';
2
+ export declare function configureIcons(vuetifyOptions: VuetifyOptions): void;
@@ -0,0 +1,4 @@
1
+ import { iconsConfiguration } from "virtual:vuetify-icons-configuration";
2
+ export function configureIcons(vuetifyOptions) {
3
+ vuetifyOptions.icons = iconsConfiguration();
4
+ }
@@ -0,0 +1,8 @@
1
+ import { configureDate } from './date'
2
+ import { defineNuxtPlugin } from '#imports'
3
+
4
+ export default defineNuxtPlugin((nuxtApp) => {
5
+ nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
6
+ configureDate(vuetifyOptions)
7
+ })
8
+ })
@@ -1,9 +1,8 @@
1
1
  import { createAdapter } from './i18n'
2
- import { defineNuxtPlugin } from '#app'
2
+ import { defineNuxtPlugin } from '#imports'
3
3
 
4
4
  export default defineNuxtPlugin((nuxtApp) => {
5
- nuxtApp.hook('vuetify:configuration', (_isDev, vuetifyOptions) => {
6
- vuetifyOptions.locale = vuetifyOptions.locale ?? {}
7
- vuetifyOptions.locale.adapter = createAdapter(nuxtApp)
5
+ nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
6
+ createAdapter(vuetifyOptions)
8
7
  })
9
8
  })
@@ -0,0 +1,8 @@
1
+ import { configureIcons } from './icons'
2
+ import { defineNuxtPlugin } from '#imports'
3
+
4
+ export default defineNuxtPlugin((nuxtApp) => {
5
+ nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
6
+ configureIcons(vuetifyOptions)
7
+ })
8
+ })
@@ -1,30 +1,11 @@
1
- import { createVuetify } from 'vuetify'
2
- import { isDev, vuetifyConfiguration } from 'virtual:vuetify-configuration'
3
- import { defineNuxtPlugin, useNuxtApp } from '#app'
4
-
5
- export default defineNuxtPlugin({
6
- name: 'vuetify:configuration:plugin',
7
- enforce: 'post',
8
- parallel: false,
9
- async setup() {
10
- const nuxtApp = useNuxtApp()
11
- const options = vuetifyConfiguration()
12
-
13
- await nuxtApp.hooks.callHook('vuetify:configuration', isDev, options)
14
-
15
- const vuetify = createVuetify(options)
16
-
17
- nuxtApp.vueApp.use(vuetify)
18
-
19
- if (process.client && isDev) {
20
- // eslint-disable-next-line no-console
21
- console.log('Vuetify 3 initialized', vuetify)
22
- }
23
-
24
- return {
25
- provide: {
26
- vuetify,
27
- },
28
- }
29
- },
30
- })
1
+ import { configureVuetify } from './config'
2
+ import { defineNuxtPlugin } from '#imports'
3
+ import { useNuxtApp } from '#app'
4
+
5
+ export default defineNuxtPlugin({
6
+ name: 'vuetify:configuration:plugin',
7
+ enforce: 'pre',
8
+ setup() {
9
+ useNuxtApp().hook('app:created', configureVuetify)
10
+ },
11
+ })
package/dist/types.d.ts CHANGED
@@ -12,4 +12,4 @@ declare module 'nuxt/schema' {
12
12
  }
13
13
 
14
14
 
15
- export { BooleanOrArrayString, ModuleOptions, VOptions, default } from './module'
15
+ export { BooleanOrArrayString, DateAdapter, DateOptions, FontAwesomeSvgIconSet, FontIconSet, IconSet, IconSetName, IconsOptions, JSSVGIconSet, ModuleOptions, VOptions, default } from './module'
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "name": "vuetify-nuxt-module",
3
3
  "type": "module",
4
- "version": "0.0.3",
5
- "packageManager": "pnpm@8.6.5",
4
+ "version": "0.2.0",
5
+ "packageManager": "pnpm@8.6.6",
6
6
  "description": "Zero-Config Nuxt Module for Vuetify ",
7
7
  "author": "userquin <userquin@gmail.com>",
8
8
  "license": "MIT",
@@ -42,7 +42,10 @@
42
42
  "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
43
43
  "dev:prepare:multiple-json": "nuxt-module-build --stub && MULTIPLE_LANG_FILES=true nuxi prepare playground",
44
44
  "dev:build": "nuxi build playground",
45
+ "dev:generate": "nuxi generate playground",
45
46
  "dev:build:multiple-json": "MULTIPLE_LANG_FILES=true nuxi build playground",
47
+ "dev:generate:multiple-json": "MULTIPLE_LANG_FILES=true nuxi generate playground",
48
+ "dev:preview": "nuxi preview playground",
46
49
  "lint": "eslint .",
47
50
  "lint:fix": "nr lint --fix",
48
51
  "test": "vitest run",
@@ -51,12 +54,12 @@
51
54
  "release": "bumpp && npm publish"
52
55
  },
53
56
  "peerDependencies": {
54
- "@nuxt/kit": "^3.5.3",
57
+ "@nuxt/kit": "^3.6.2",
55
58
  "vite-plugin-vuetify": "^1.0.2",
56
59
  "vuetify": "^3.3.6"
57
60
  },
58
61
  "dependencies": {
59
- "@nuxt/kit": "^3.6.1",
62
+ "@nuxt/kit": "^3.6.2",
60
63
  "defu": "^6.1.2",
61
64
  "vite-plugin-vuetify": "^1.0.2",
62
65
  "vuetify": "^3.3.6"
@@ -64,16 +67,22 @@
64
67
  "devDependencies": {
65
68
  "@antfu/eslint-config": "^0.39.6",
66
69
  "@antfu/ni": "^0.21.4",
67
- "@nuxt/devtools": "^0.6.6",
70
+ "@date-io/luxon": "^2.16.1",
71
+ "@fortawesome/fontawesome-svg-core": "^6.4.0",
72
+ "@fortawesome/free-solid-svg-icons": "^6.4.0",
73
+ "@fortawesome/vue-fontawesome": "^3.0.3",
74
+ "@mdi/js": "^7.2.96",
75
+ "@nuxt/devtools": "^0.6.7",
68
76
  "@nuxt/module-builder": "^0.4.0",
69
- "@nuxt/schema": "^3.6.1",
70
- "@nuxt/test-utils": "^3.6.1",
71
- "@nuxtjs/i18n": "^8.0.0-beta.12",
77
+ "@nuxt/schema": "^3.6.2",
78
+ "@nuxt/test-utils": "^3.6.2",
79
+ "@nuxtjs/i18n": "^8.0.0-beta.13",
72
80
  "@parcel/watcher": "^2.1.0",
73
81
  "@types/node": "^18",
74
82
  "bumpp": "^9.1.1",
75
83
  "eslint": "^8.43.0",
76
- "nuxt": "^3.6.1",
84
+ "luxon": "^3.3.0",
85
+ "nuxt": "^3.6.2",
77
86
  "sass": "^1.63.6",
78
87
  "typescript": "^5.1.6",
79
88
  "vite": "^4.3.9",
@@ -86,6 +95,7 @@
86
95
  "node:fs",
87
96
  "consola",
88
97
  "esbuild",
98
+ "local-pkg",
89
99
  "pathe",
90
100
  "rollup",
91
101
  "upath",
@@ -97,7 +107,11 @@
97
107
  },
98
108
  "pnpm": {
99
109
  "patchedDependencies": {
100
- "@nuxtjs/i18n@8.0.0-beta.12": "patches/@nuxtjs__i18n@8.0.0-beta.12.patch"
110
+ "@nuxtjs/i18n@8.0.0-beta.13": "patches/@nuxtjs__i18n@8.0.0-beta.13.patch"
101
111
  }
112
+ },
113
+ "stackblitz": {
114
+ "installDependencies": false,
115
+ "startCommand": "node .stackblitz.js && pnpm install && pnpm run dev"
102
116
  }
103
- }
117
+ }