vuetify-nuxt-module 0.0.2 → 0.1.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 +38 -10
- package/configuration.d.ts +10 -1
- package/dist/module.d.ts +51 -2
- package/dist/module.json +1 -1
- package/dist/module.mjs +111 -23
- package/dist/runtime/plugins/date.d.ts +3 -0
- package/dist/runtime/plugins/date.mjs +11 -0
- package/dist/runtime/plugins/i18n.mjs +1 -8
- package/dist/runtime/plugins/vuetify-date.mts +16 -0
- package/dist/runtime/plugins/vuetify-i18n.mts +1 -1
- package/dist/runtime/plugins/vuetify.mts +3 -3
- package/dist/types.d.ts +1 -1
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<p align='center'>
|
|
2
|
-
<img src='
|
|
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
3
|
Zero-config Nuxt module for Vuetify
|
|
4
4
|
</p>
|
|
5
5
|
|
|
@@ -28,16 +28,17 @@ Zero-config Nuxt module for Vuetify
|
|
|
28
28
|
- 📖 [**Documentation & guides**](README.md#-features) (WIP)
|
|
29
29
|
- 👌 **Zero-Config**: sensible built-in default [Vuetify](https://vuetifyjs.com/) configuration for common use cases
|
|
30
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
|
|
31
|
+
- ⚡ **Fully Tree Shakable**: by default, only the needed Vuetify components are imported
|
|
32
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
|
|
33
|
+
- ✨ **Configurable Styles**: configure your variables using [Vuetify SASS Variables](https://vuetifyjs.com/en/features/sass-variables/)
|
|
34
34
|
- 💥 **SSR**: automatic SSR detection and configuration
|
|
35
|
-
- 🌍 **I18n
|
|
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
|
+
- 📆 **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
|
|
36
37
|
- 🦾 **Type Strong**: written in [TypeScript](https://www.typescriptlang.org/)
|
|
37
38
|
|
|
38
39
|
## 📦 Install
|
|
39
40
|
|
|
40
|
-
> Requires Vite
|
|
41
|
+
> Requires Vite, will not work with Webpack
|
|
41
42
|
|
|
42
43
|
```bash
|
|
43
44
|
npm i vuetify-nuxt-module -D
|
|
@@ -74,22 +75,49 @@ export default defineNuxtConfig({
|
|
|
74
75
|
})
|
|
75
76
|
```
|
|
76
77
|
|
|
78
|
+
<!--
|
|
79
|
+
Read the [📖 documentation](https://vite-pwa-org.netlify.app/frameworks/nuxt) for a complete guide on how to configure and use
|
|
80
|
+
this plugin.
|
|
81
|
+
-->
|
|
82
|
+
|
|
83
|
+
|
|
77
84
|
## 🌍 I18n support
|
|
78
85
|
|
|
79
86
|
> Requires latest [@nuxtjs/i18n](https://v8.i18n.nuxtjs.org/) Nuxt module: `8.0.0.beta.12`.
|
|
80
87
|
|
|
81
88
|
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
89
|
|
|
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: [
|
|
90
|
+
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](./package.json#L97-L101).
|
|
84
91
|
|
|
85
92
|
You can check the playground folder, you can run it using single or multiple json files per locale:
|
|
86
93
|
- for single file per locale: run from root folder `pnpm install && nr dev:prepare && nr dev`
|
|
87
94
|
- for multiple files per locale: run from root folder `pnpm install && nr dev:prepare:multiple-json && nr dev:multiple-json`
|
|
88
95
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
96
|
+
## 📆 Date components support
|
|
97
|
+
|
|
98
|
+
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.
|
|
99
|
+
|
|
100
|
+
To use Vuetify components [that require date functionality](https://vuetifyjs.com/en/features/dates/):
|
|
101
|
+
- (optional): install one of the [@date-io](https://github.com/dmtrKovalenko/date-io#projects) adapters
|
|
102
|
+
- configure the date entry in your Vuetify configuration:
|
|
103
|
+
```ts
|
|
104
|
+
vuetifyOptions: {
|
|
105
|
+
date: {
|
|
106
|
+
adapter: 'vuetify' // 'vuetify' | 'date-fns' | 'moment' | 'luxon' | 'dayjs' | 'js-joda' | 'date-fns-jalali' | 'jalaali' | 'hijri' | 'custom'
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
If you also have `@nuxtjs/i18n` module installed, `vuetifyOptions.date.locale` will be automatically configured, beware, the configured `locale` entry will be ignored.
|
|
112
|
+
|
|
113
|
+
If you want to use a custom date adapter, you can configure it using `vuetifyOptions.date.adapter = 'custom'`, and then:
|
|
114
|
+
- add a Nuxt Plugin and add the `vuetify:configuration` hook to configure your Vuetify options
|
|
115
|
+
- you can import the `virtual:vuetify-date-configuration` module, you will have access to the configuration:
|
|
116
|
+
```ts
|
|
117
|
+
import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
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.
|
|
93
121
|
|
|
94
122
|
## 👀 Full config
|
|
95
123
|
|
package/configuration.d.ts
CHANGED
|
@@ -2,5 +2,14 @@ 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
|
|
6
15
|
}
|
package/dist/module.d.ts
CHANGED
|
@@ -2,6 +2,35 @@ import * as _nuxt_schema from '@nuxt/schema';
|
|
|
2
2
|
import { VuetifyOptions } from 'vuetify';
|
|
3
3
|
|
|
4
4
|
type BooleanOrArrayString = boolean | string[];
|
|
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
|
+
}
|
|
5
34
|
interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | 'locale' | 'date'>> {
|
|
6
35
|
/**
|
|
7
36
|
* Include the lab components?
|
|
@@ -25,21 +54,41 @@ interface VOptions extends Partial<Omit<VuetifyOptions, 'ssr' | 'directives' | '
|
|
|
25
54
|
* @default false
|
|
26
55
|
*/
|
|
27
56
|
directives?: BooleanOrArrayString;
|
|
57
|
+
/**
|
|
58
|
+
* Date configuration.
|
|
59
|
+
*
|
|
60
|
+
* When this option is configured, the `v-date-picker` lab component will be included.
|
|
61
|
+
*
|
|
62
|
+
* @see https://vuetifyjs.com/features/dates/
|
|
63
|
+
* @see https://vuetifyjs.com/components/date-pickers/
|
|
64
|
+
*/
|
|
65
|
+
date?: DateOptions;
|
|
28
66
|
}
|
|
29
67
|
interface ModuleOptions {
|
|
30
68
|
moduleOptions?: {
|
|
69
|
+
/**
|
|
70
|
+
* Vuetify styles.
|
|
71
|
+
*
|
|
72
|
+
* @see https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin
|
|
73
|
+
*/
|
|
31
74
|
styles?: true | 'none' | 'expose' | 'sass' | {
|
|
32
75
|
configFile: string;
|
|
33
76
|
};
|
|
34
77
|
};
|
|
78
|
+
/**
|
|
79
|
+
* Vuetify options.
|
|
80
|
+
*/
|
|
35
81
|
vuetifyOptions?: VOptions;
|
|
36
82
|
}
|
|
37
83
|
declare module '#app' {
|
|
38
84
|
interface RuntimeNuxtHooks {
|
|
39
|
-
'vuetify:configuration': (
|
|
85
|
+
'vuetify:configuration': (options: {
|
|
86
|
+
isDev: boolean;
|
|
87
|
+
vuetifyOptions: VuetifyOptions;
|
|
88
|
+
}) => Promise<void> | void;
|
|
40
89
|
}
|
|
41
90
|
}
|
|
42
91
|
|
|
43
92
|
declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
|
|
44
93
|
|
|
45
|
-
export { BooleanOrArrayString, ModuleOptions, VOptions, _default as default };
|
|
94
|
+
export { BooleanOrArrayString, DateAdapter, DateOptions, ModuleOptions, VOptions, _default as default };
|
package/dist/module.json
CHANGED
package/dist/module.mjs
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
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 'local-pkg';
|
|
4
5
|
import { utimes } from 'node:fs/promises';
|
|
5
6
|
import { resolveVuetifyBase, normalizePath, writeStyles, cacheDir } from '@vuetify/loader-shared';
|
|
6
|
-
import
|
|
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.1.0";
|
|
10
11
|
|
|
11
12
|
function isSubdir(root, test) {
|
|
12
|
-
const relative =
|
|
13
|
-
return relative && !relative.startsWith("..") && !
|
|
13
|
+
const relative$1 = relative(root, test);
|
|
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
17
|
function stylesPlugin(options, logger) {
|
|
@@ -111,14 +112,14 @@ function stylesPlugin(options, logger) {
|
|
|
111
112
|
},
|
|
112
113
|
configResolved(config) {
|
|
113
114
|
if (typeof options.styles === "object") {
|
|
114
|
-
if (
|
|
115
|
+
if (isAbsolute(options.styles.configFile))
|
|
115
116
|
configFile = options.styles.configFile;
|
|
116
117
|
else
|
|
117
|
-
configFile =
|
|
118
|
+
configFile = join(config.root || process.cwd(), options.styles.configFile);
|
|
118
119
|
}
|
|
119
120
|
},
|
|
120
|
-
async resolveId(source, importer, { custom }) {
|
|
121
|
-
if (source === "vuetify/styles" || importer && source.endsWith(".css") && isSubdir(vuetifyBase,
|
|
121
|
+
async resolveId(source, importer, { custom, ssr }) {
|
|
122
|
+
if (source === "vuetify/styles" || importer && source.endsWith(".css") && isSubdir(vuetifyBase, isAbsolute(source) ? source : importer)) {
|
|
122
123
|
if (options.styles === "none") {
|
|
123
124
|
return "/@plugin-vuetify/lib/__void__";
|
|
124
125
|
} else if (options.styles === "sass") {
|
|
@@ -143,14 +144,13 @@ function stylesPlugin(options, logger) {
|
|
|
143
144
|
if (!resolution)
|
|
144
145
|
return null;
|
|
145
146
|
const target = resolution.id.replace(/\.css$/, ".sass");
|
|
146
|
-
const file =
|
|
147
|
+
const file = relative(join(vuetifyBase, "lib"), target);
|
|
147
148
|
const contents = `@use "${normalizePath(configFile)}"
|
|
148
149
|
@use "${normalizePath(target)}"`;
|
|
149
150
|
tempFiles.set(file, contents);
|
|
150
|
-
return `/@plugin-vuetify/lib/${file}`;
|
|
151
|
+
return ssr ? `/@plugin-vuetify/lib/${file}` : `/@fs/plugin-vuetify/lib/${file}`;
|
|
151
152
|
}
|
|
152
153
|
}
|
|
153
|
-
return null;
|
|
154
154
|
},
|
|
155
155
|
async transform(code, id) {
|
|
156
156
|
if (options.styles === "expose" && [".scss", ".sass"].some((v) => id.endsWith(v)) && styleImportRegexp.test(code)) {
|
|
@@ -170,13 +170,26 @@ function stylesPlugin(options, logger) {
|
|
|
170
170
|
const file = /^\/@plugin-vuetify\/lib\/(.*?)(\?.*)?$/.exec(id)[1];
|
|
171
171
|
return tempFiles.get(file);
|
|
172
172
|
}
|
|
173
|
+
if (id.startsWith("/@fs/plugin-vuetify/lib/")) {
|
|
174
|
+
const file = /^\/@fs\/plugin-vuetify\/lib\/(.*?)(\?.*)?$/.exec(id)[1];
|
|
175
|
+
return tempFiles.get(file);
|
|
176
|
+
}
|
|
173
177
|
}
|
|
174
178
|
};
|
|
175
179
|
}
|
|
176
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
|
+
|
|
177
186
|
function vuetifyConfigurationPlugin(isDev, directives, labComponents, vuetifyAppOptions) {
|
|
178
|
-
const
|
|
179
|
-
|
|
187
|
+
const {
|
|
188
|
+
directives: _directives,
|
|
189
|
+
date: _date,
|
|
190
|
+
locale: _locale,
|
|
191
|
+
...newVuetifyOptions
|
|
192
|
+
} = vuetifyAppOptions;
|
|
180
193
|
return {
|
|
181
194
|
name: "vuetify:configuration:nuxt",
|
|
182
195
|
enforce: "pre",
|
|
@@ -193,7 +206,7 @@ ${labComponentsResult.imports}
|
|
|
193
206
|
|
|
194
207
|
export const isDev = ${isDev}
|
|
195
208
|
export function vuetifyConfiguration() {
|
|
196
|
-
const options = ${JSON.stringify(
|
|
209
|
+
const options = ${JSON.stringify(newVuetifyOptions)}
|
|
197
210
|
${directivesResult.expression}
|
|
198
211
|
${labComponentsResult.expression}
|
|
199
212
|
return options
|
|
@@ -218,7 +231,8 @@ export function vuetifyConfiguration() {
|
|
|
218
231
|
}
|
|
219
232
|
}
|
|
220
233
|
function buildLabComponents() {
|
|
221
|
-
|
|
234
|
+
const dateOptions = vuetifyAppOptions.date;
|
|
235
|
+
if (!labComponents && !dateOptions)
|
|
222
236
|
return { imports: "", expression: "" };
|
|
223
237
|
if (typeof labComponents === "boolean") {
|
|
224
238
|
return {
|
|
@@ -226,14 +240,49 @@ export function vuetifyConfiguration() {
|
|
|
226
240
|
expression: "options.components = labsComponents"
|
|
227
241
|
};
|
|
228
242
|
} else {
|
|
243
|
+
const components = [...new Set(dateOptions ? ["VDatePicker", ...labComponents] : labComponents)];
|
|
229
244
|
return {
|
|
230
|
-
imports: `${
|
|
231
|
-
expression: `options.components = {${
|
|
245
|
+
imports: `${components.map((d) => `import { ${d} } from 'vuetify/labs/${d}'`).join("\n")}`,
|
|
246
|
+
expression: `options.components = {${components.join(",")}}`
|
|
232
247
|
};
|
|
233
248
|
}
|
|
234
249
|
}
|
|
235
250
|
}
|
|
236
251
|
|
|
252
|
+
function vuetifyDateConfigurationPlugin(isDev, i18n, dateAdapter, dateOptions) {
|
|
253
|
+
const { adapter: _adapter, ...newDateOptions } = dateOptions;
|
|
254
|
+
return {
|
|
255
|
+
name: "vuetify:date-configuration:nuxt",
|
|
256
|
+
enforce: "pre",
|
|
257
|
+
resolveId(id) {
|
|
258
|
+
if (id === VIRTUAL_VUETIFY_DATE_CONFIGURATION)
|
|
259
|
+
return RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION;
|
|
260
|
+
},
|
|
261
|
+
async load(id) {
|
|
262
|
+
if (id === RESOLVED_VIRTUAL_VUETIFY_DATE_CONFIGURATION) {
|
|
263
|
+
const imports = dateAdapter === "vuetify" ? "import { VuetifyDateAdapter } from 'vuetify/labs/date/adapters/vuetify'" : dateAdapter === "custom" ? "" : `import Adapter from '@date-io/${dateAdapter}'`;
|
|
264
|
+
return `${imports}
|
|
265
|
+
export const isDev = ${isDev}
|
|
266
|
+
export const i18n = ${i18n}
|
|
267
|
+
export const adapter = '${dateAdapter}'
|
|
268
|
+
export function dateConfiguration() {
|
|
269
|
+
const options = ${JSON.stringify(newDateOptions)}
|
|
270
|
+
${buildAdapter(dateAdapter)}
|
|
271
|
+
return options
|
|
272
|
+
}
|
|
273
|
+
`;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
};
|
|
277
|
+
}
|
|
278
|
+
function buildAdapter(dateAdapter) {
|
|
279
|
+
if (dateAdapter === "custom")
|
|
280
|
+
return "";
|
|
281
|
+
if (dateAdapter === "vuetify")
|
|
282
|
+
return "options.adapter = VuetifyDateAdapter";
|
|
283
|
+
return "options.adapter = Adapter";
|
|
284
|
+
}
|
|
285
|
+
|
|
237
286
|
const CONFIG_KEY = "vuetify";
|
|
238
287
|
const logger = useLogger(`nuxt:${CONFIG_KEY}`);
|
|
239
288
|
const module = defineNuxtModule({
|
|
@@ -266,11 +315,33 @@ const module = defineNuxtModule({
|
|
|
266
315
|
const vuetifyAppOptions = defu(vOptions, {
|
|
267
316
|
ssr: isSSR
|
|
268
317
|
});
|
|
318
|
+
const { styles = true } = moduleOptions ?? {};
|
|
319
|
+
const i18n = hasNuxtModule("@nuxtjs/i18n", nuxt);
|
|
320
|
+
let dateAdapter;
|
|
321
|
+
const dateOptions = vuetifyOptions?.date;
|
|
322
|
+
if (dateOptions) {
|
|
323
|
+
const adapter = dateOptions.adapter;
|
|
324
|
+
const date = detectDate();
|
|
325
|
+
if (!adapter && date.length > 1)
|
|
326
|
+
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.`);
|
|
327
|
+
if (adapter) {
|
|
328
|
+
if (adapter === "vuetify" || adapter === "custom") {
|
|
329
|
+
dateAdapter = adapter;
|
|
330
|
+
} else {
|
|
331
|
+
if (date.find((d) => d[0] === adapter) === void 0)
|
|
332
|
+
logger.warn(`Ignoring Vuetify Date configuration, date adapter "@date-io/${adapter}" not installed!`);
|
|
333
|
+
else
|
|
334
|
+
dateAdapter = adapter;
|
|
335
|
+
}
|
|
336
|
+
} else if (date.length === 0) {
|
|
337
|
+
dateAdapter = "vuetify";
|
|
338
|
+
} else {
|
|
339
|
+
dateAdapter = date[0];
|
|
340
|
+
}
|
|
341
|
+
}
|
|
269
342
|
const runtimeDir = resolver.resolve("./runtime");
|
|
270
343
|
nuxt.options.build.transpile.push(runtimeDir);
|
|
271
344
|
nuxt.options.build.transpile.push(CONFIG_KEY);
|
|
272
|
-
const { styles = true } = moduleOptions ?? {};
|
|
273
|
-
nuxt.options.build.transpile.push(CONFIG_KEY);
|
|
274
345
|
(_a = nuxt.options).css ?? (_a.css = []);
|
|
275
346
|
if (typeof styles === "string" && ["sass", "expose"].includes(styles))
|
|
276
347
|
nuxt.options.css.unshift("vuetify/styles/main.sass");
|
|
@@ -279,7 +350,7 @@ const module = defineNuxtModule({
|
|
|
279
350
|
else if (typeof styles === "object" && styles?.configFile && typeof styles.configFile === "string")
|
|
280
351
|
nuxt.options.css.unshift(styles.configFile);
|
|
281
352
|
extendWebpackConfig(() => {
|
|
282
|
-
throw new Error("Webpack is not supported
|
|
353
|
+
throw new Error("Webpack is not supported: vuetify-nuxt-module module can only be used with Vite!");
|
|
283
354
|
});
|
|
284
355
|
nuxt.hook("vite:extend", ({ config }) => checkVuetifyPlugins(config));
|
|
285
356
|
nuxt.hook("prepare:types", ({ references }) => {
|
|
@@ -295,7 +366,7 @@ const module = defineNuxtModule({
|
|
|
295
366
|
...Array.isArray(viteInlineConfig.ssr.noExternal) ? viteInlineConfig.ssr.noExternal : [],
|
|
296
367
|
CONFIG_KEY
|
|
297
368
|
];
|
|
298
|
-
const autoImportPlugin = vuetify({ styles, autoImport: true }).find((p) => p && typeof p === "object" && "name" in p && p.name === "vuetify:import");
|
|
369
|
+
const autoImportPlugin = vuetify({ styles: true, autoImport: true }).find((p) => p && typeof p === "object" && "name" in p && p.name === "vuetify:import");
|
|
299
370
|
viteInlineConfig.plugins.push(autoImportPlugin);
|
|
300
371
|
viteInlineConfig.plugins.push(stylesPlugin({ styles }, logger));
|
|
301
372
|
viteInlineConfig.plugins.push(vuetifyConfigurationPlugin(
|
|
@@ -304,15 +375,28 @@ const module = defineNuxtModule({
|
|
|
304
375
|
labComponents,
|
|
305
376
|
vuetifyAppOptions
|
|
306
377
|
));
|
|
378
|
+
if (dateAdapter) {
|
|
379
|
+
viteInlineConfig.plugins.push(vuetifyDateConfigurationPlugin(
|
|
380
|
+
nuxt.options.dev,
|
|
381
|
+
i18n,
|
|
382
|
+
dateAdapter,
|
|
383
|
+
dateOptions
|
|
384
|
+
));
|
|
385
|
+
}
|
|
307
386
|
});
|
|
308
387
|
addPlugin({
|
|
309
388
|
src: resolver.resolve(runtimeDir, "plugins/vuetify.mts")
|
|
310
389
|
});
|
|
311
|
-
if (
|
|
390
|
+
if (i18n) {
|
|
312
391
|
addPlugin({
|
|
313
392
|
src: resolver.resolve(runtimeDir, "plugins/vuetify-i18n.mts")
|
|
314
393
|
});
|
|
315
394
|
}
|
|
395
|
+
if (dateAdapter) {
|
|
396
|
+
addPlugin({
|
|
397
|
+
src: resolver.resolve(runtimeDir, "plugins/vuetify-date.mts")
|
|
398
|
+
});
|
|
399
|
+
}
|
|
316
400
|
}
|
|
317
401
|
});
|
|
318
402
|
function checkVuetifyPlugins(config) {
|
|
@@ -323,5 +407,9 @@ function checkVuetifyPlugins(config) {
|
|
|
323
407
|
if (plugin)
|
|
324
408
|
throw new Error("Remove vite-plugin-vuetify plugin from Vite Plugins entry in Nuxt config file!");
|
|
325
409
|
}
|
|
410
|
+
function detectDate() {
|
|
411
|
+
const result = [];
|
|
412
|
+
return result;
|
|
413
|
+
}
|
|
326
414
|
|
|
327
415
|
export { module as default };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { camelize } from "../../utils";
|
|
2
|
+
export function configureLocales(nuxtApp, options) {
|
|
3
|
+
const locales = nuxtApp.$i18n?.locales.value;
|
|
4
|
+
if (locales) {
|
|
5
|
+
options.locale = locales.reduce((acc, locale) => {
|
|
6
|
+
acc[camelize(locale.code)] = locale.code;
|
|
7
|
+
return acc;
|
|
8
|
+
}, {});
|
|
9
|
+
}
|
|
10
|
+
return options;
|
|
11
|
+
}
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
toRaw,
|
|
8
8
|
watch
|
|
9
9
|
} from "vue";
|
|
10
|
+
import { toKebabCase } from "../../utils";
|
|
10
11
|
import { useI18n } from "#imports";
|
|
11
12
|
export function createAdapter(nuxtApp) {
|
|
12
13
|
const i18n = nuxtApp.$i18n;
|
|
@@ -31,14 +32,6 @@ function getCurrentInstance(name, message) {
|
|
|
31
32
|
throw new Error(`[Vuetify] ${name} ${message || "must be called from inside a setup function"}`);
|
|
32
33
|
return vm;
|
|
33
34
|
}
|
|
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
35
|
function useToggleScope(source, fn) {
|
|
43
36
|
let scope;
|
|
44
37
|
function start() {
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { adapter, dateConfiguration, i18n } from 'virtual:vuetify-date-configuration'
|
|
2
|
+
import { configureLocales } from './date'
|
|
3
|
+
import { defineNuxtPlugin } from '#app'
|
|
4
|
+
|
|
5
|
+
export default defineNuxtPlugin((nuxtApp) => {
|
|
6
|
+
nuxtApp.hook('vuetify:configuration', async ({ vuetifyOptions }) => {
|
|
7
|
+
if (adapter === 'custom')
|
|
8
|
+
return
|
|
9
|
+
|
|
10
|
+
const options = dateConfiguration()
|
|
11
|
+
if (i18n)
|
|
12
|
+
configureLocales(nuxtApp, options)
|
|
13
|
+
|
|
14
|
+
vuetifyOptions.date = options
|
|
15
|
+
})
|
|
16
|
+
})
|
|
@@ -2,7 +2,7 @@ import { createAdapter } from './i18n'
|
|
|
2
2
|
import { defineNuxtPlugin } from '#app'
|
|
3
3
|
|
|
4
4
|
export default defineNuxtPlugin((nuxtApp) => {
|
|
5
|
-
nuxtApp.hook('vuetify:configuration', (
|
|
5
|
+
nuxtApp.hook('vuetify:configuration', ({ vuetifyOptions }) => {
|
|
6
6
|
vuetifyOptions.locale = vuetifyOptions.locale ?? {}
|
|
7
7
|
vuetifyOptions.locale.adapter = createAdapter(nuxtApp)
|
|
8
8
|
})
|
|
@@ -8,11 +8,11 @@ export default defineNuxtPlugin({
|
|
|
8
8
|
parallel: false,
|
|
9
9
|
async setup() {
|
|
10
10
|
const nuxtApp = useNuxtApp()
|
|
11
|
-
const
|
|
11
|
+
const vuetifyOptions = vuetifyConfiguration()
|
|
12
12
|
|
|
13
|
-
await nuxtApp.hooks.callHook('vuetify:configuration', isDev,
|
|
13
|
+
await nuxtApp.hooks.callHook('vuetify:configuration', { isDev, vuetifyOptions })
|
|
14
14
|
|
|
15
|
-
const vuetify = createVuetify(
|
|
15
|
+
const vuetify = createVuetify(vuetifyOptions)
|
|
16
16
|
|
|
17
17
|
nuxtApp.vueApp.use(vuetify)
|
|
18
18
|
|
package/dist/types.d.ts
CHANGED
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.1.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",
|
|
@@ -64,6 +64,7 @@
|
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@antfu/eslint-config": "^0.39.6",
|
|
66
66
|
"@antfu/ni": "^0.21.4",
|
|
67
|
+
"@date-io/luxon": "^2.16.1",
|
|
67
68
|
"@nuxt/devtools": "^0.6.6",
|
|
68
69
|
"@nuxt/module-builder": "^0.4.0",
|
|
69
70
|
"@nuxt/schema": "^3.6.1",
|
|
@@ -73,6 +74,7 @@
|
|
|
73
74
|
"@types/node": "^18",
|
|
74
75
|
"bumpp": "^9.1.1",
|
|
75
76
|
"eslint": "^8.43.0",
|
|
77
|
+
"luxon": "^3.3.0",
|
|
76
78
|
"nuxt": "^3.6.1",
|
|
77
79
|
"sass": "^1.63.6",
|
|
78
80
|
"typescript": "^5.1.6",
|
|
@@ -86,6 +88,7 @@
|
|
|
86
88
|
"node:fs",
|
|
87
89
|
"consola",
|
|
88
90
|
"esbuild",
|
|
91
|
+
"local-pkg",
|
|
89
92
|
"pathe",
|
|
90
93
|
"rollup",
|
|
91
94
|
"upath",
|