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 +255 -106
- package/configuration.d.ts +17 -1
- package/dist/module.d.ts +99 -3
- package/dist/module.json +1 -1
- package/dist/module.mjs +298 -17
- package/dist/runtime/plugins/config.d.ts +22 -0
- package/dist/runtime/plugins/config.mjs +14 -0
- package/dist/runtime/plugins/date.d.ts +2 -0
- package/dist/runtime/plugins/date.mjs +17 -0
- package/dist/runtime/plugins/i18n.d.ts +2 -20
- package/dist/runtime/plugins/i18n.mjs +10 -13
- package/dist/runtime/plugins/icons.d.ts +2 -0
- package/dist/runtime/plugins/icons.mjs +4 -0
- package/dist/runtime/plugins/vuetify-date.mts +8 -0
- package/dist/runtime/plugins/vuetify-i18n.mts +3 -4
- package/dist/runtime/plugins/vuetify-icons.mts +8 -0
- package/dist/runtime/plugins/vuetify.mts +11 -30
- package/dist/types.d.ts +1 -1
- package/package.json +25 -11
package/README.md
CHANGED
|
@@ -1,106 +1,255 @@
|
|
|
1
|
-
<p align='center'>
|
|
2
|
-
<img src='
|
|
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
|
|
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
|
|
34
|
-
- π₯ **SSR**: automatic SSR detection and configuration
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
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
|
+
[](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 © 2023-PRESENT [JoaquΓn SΓ‘nchez](https://github.com/userquin)
|
package/configuration.d.ts
CHANGED
|
@@ -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
|
|
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
|
-
|
|
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': (
|
|
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
package/dist/module.mjs
CHANGED
|
@@ -1,19 +1,20 @@
|
|
|
1
|
-
import { useLogger, defineNuxtModule, createResolver, extendWebpackConfig, addPlugin
|
|
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
|
|
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
|
|
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
|
|
182
|
-
|
|
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(
|
|
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
|
-
|
|
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: `${
|
|
234
|
-
expression: `options.components = {${
|
|
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
|
|
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
|
|
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(
|
|
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
|
-
|
|
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,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 {
|
|
2
|
-
|
|
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
|
-
|
|
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
|
-
|
|
17
|
-
|
|
18
|
-
|
|
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,
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { createAdapter } from './i18n'
|
|
2
|
-
import { defineNuxtPlugin } from '#
|
|
2
|
+
import { defineNuxtPlugin } from '#imports'
|
|
3
3
|
|
|
4
4
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
5
|
-
nuxtApp.hook('vuetify:configuration', (
|
|
6
|
-
vuetifyOptions
|
|
7
|
-
vuetifyOptions.locale.adapter = createAdapter(nuxtApp)
|
|
5
|
+
nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
|
|
6
|
+
createAdapter(vuetifyOptions)
|
|
8
7
|
})
|
|
9
8
|
})
|
|
@@ -1,30 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
export default defineNuxtPlugin({
|
|
6
|
-
name: 'vuetify:configuration:plugin',
|
|
7
|
-
enforce: '
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
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
|
|
5
|
-
"packageManager": "pnpm@8.6.
|
|
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.
|
|
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.
|
|
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
|
-
"@
|
|
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.
|
|
70
|
-
"@nuxt/test-utils": "^3.6.
|
|
71
|
-
"@nuxtjs/i18n": "^8.0.0-beta.
|
|
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
|
-
"
|
|
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.
|
|
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
|
+
}
|