Skip to content

Commit 968f900

Browse files
userquinuserquin
authored
fix: handle date adapter properly (#167)
* fix: handle date adapter properly * docs: fix `localeMessages`, using `loadMessages` * fix: docs build * chore: add moment * chore: add dayjs * chore: add js-joda * chore: add date-fns-jalali * chore: add jalali * chore: add hijri
1 parent f0b2b9d commit 968f900

File tree

12 files changed

+456
-28
lines changed

12 files changed

+456
-28
lines changed

‎date-io-playground/.nuxtrc‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
typescript.tsConfig.exclude[]=../src/runtime

‎date-io-playground/app.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script setup lang="ts">
2+
import type DateFnsAdapter from '@date-io/date-fns'
3+
import { adapter } from 'virtual:vuetify-date-configuration'
4+
5+
const dateString = ref('')
6+
7+
watch(dateString, (x) => {
8+
// eslint-disable-next-line no-console
9+
console.log('dateString', x)
10+
})
11+
12+
onMounted(() => {
13+
const date = useVDate()
14+
if (adapter === 'date-fns') {
15+
// Missing type is a Vuetify error (https://github.com/vuetifyjs/vuetify/issues/18710)
16+
dateString.value = (date as DateFnsAdapter).formatByString(new Date(), 'dd MMMM yyyy')
17+
}
18+
else {
19+
dateString.value = date.format(date.parseISO(new Date().toISOString()), 'fullDate')
20+
}
21+
})
22+
</script>
23+
24+
<template>
25+
<div>
26+
<div class="adapter">
27+
@date-io/{{ adapter }}: {{ dateString }}
28+
</div>
29+
<br>
30+
<v-date-picker />
31+
</div>
32+
</template>
33+
34+
<style>
35+
.adapter {
36+
padding: 1rem;
37+
}
38+
</style>

‎date-io-playground/nuxt.config.ts‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
export default defineNuxtConfig({
2+
// ssr: false,
3+
sourcemap: true,
4+
imports: {
5+
autoImport: true,
6+
injectAtEnd: true,
7+
},
8+
modules: ['vuetify-nuxt-module'],
9+
vuetify: {
10+
moduleOptions: {
11+
prefixComposables: true,
12+
},
13+
vuetifyOptions: {
14+
date: {
15+
adapter: 'hijri',
16+
},
17+
locale: {
18+
locale: 'es',
19+
},
20+
localeMessages: ['es'],
21+
},
22+
},
23+
vite: {
24+
clearScreen: false,
25+
define: {
26+
'process.env.DEBUG': false,
27+
},
28+
build: {
29+
target: 'esnext',
30+
},
31+
},
32+
nitro: {
33+
esbuild: {
34+
options: {
35+
target: 'esnext',
36+
},
37+
},
38+
},
39+
app: {
40+
baseURL: '/',
41+
head: {
42+
meta: [
43+
{ charset: 'utf-8' },
44+
],
45+
},
46+
},
47+
experimental: {
48+
inlineSSRStyles: false,
49+
payloadExtraction: false,
50+
typedPages: false,
51+
typescriptBundlerResolution: true,
52+
watcher: 'parcel',
53+
},
54+
devtools: {
55+
enabled: true,
56+
},
57+
})

‎date-io-playground/package.json‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
{
2+
"name": "vuetify-nuxt-module-date-io-playground",
3+
"type": "module",
4+
"private": true,
5+
"scripts": {
6+
"dev:prepare": "nuxt prepare",
7+
"dev": "nuxi dev",
8+
"build": "nuxi build",
9+
"generate": "nuxi generate"
10+
},
11+
"devDependencies": {
12+
"@date-io/date-fns": "^2.17.0",
13+
"@date-io/date-fns-jalali": "^2.17.0",
14+
"@date-io/dayjs": "^2.17.0",
15+
"@date-io/hijri": "^2.17.0",
16+
"@date-io/js-joda": "^2.17.0",
17+
"@date-io/luxon": "^2.17.0",
18+
"@date-io/moment": "^2.17.0",
19+
"@types/date-fns": "^2.6.0",
20+
"@types/moment": "^2.13.0",
21+
"@types/moment-hijri": "^2.1.0",
22+
"@types/moment-jalaali": "^0.7.6",
23+
"@unocss/nuxt": "^0.57.7",
24+
"dayjs": "^1.11.10",
25+
"date-fns": "^2.30.0",
26+
"date-fns-jalali": "^2.19.0-2",
27+
"@js-joda/core": "^3.2.0",
28+
"@js-joda/locale_en-us": "^3.2.2",
29+
"@js-joda/locale_es": "^3.2.2",
30+
"luxon": "^3.4.3",
31+
"moment": "^2.29.4",
32+
"moment-hijri": "^2.1.2",
33+
"moment-jalaali": "0.9.2",
34+
"nuxt": "^3.8.2",
35+
"sass": "^1.63.6",
36+
"typescript": "^5.3.2",
37+
"vue-tsc": "^1.8.22",
38+
"vuetify-nuxt-module": "workspace:*"
39+
}
40+
}

‎date-io-playground/tsconfig.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "./.nuxt/tsconfig.json"
3+
}

‎docs/guide/vuetify-locale-messages.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# Vuetify Locale Messages
22

3-
You can load [Vuetify Locale Messages](https://vuetifyjs.com/en/features/internationalization/#getting-started) using the `vuetifyOptions.loadMessages` module configuration option, you don't need to configure a Nuxt Plugin with the `vuetify:before-create` hook, the module will import them for you, it has been declared properly to have better DX.
3+
You can load [Vuetify Locale Messages](https://vuetifyjs.com/en/features/internationalization/#getting-started) using the `vuetifyOptions.localeMessages` module configuration option, you don't need to configure a Nuxt Plugin with the `vuetify:before-create` hook, the module will import them for you, it has been declared properly to have better DX.
44

55
::: warning
6-
When `@nuxtjs/i18n` Nuxt module is present, `vuetifyOptions.loadMessages` module configuration option will be ignored.
6+
When `@nuxtjs/i18n` Nuxt module is present, `vuetifyOptions.localeMessages` module configuration option will be ignored.
77
:::
88

99
Using the example in [Vuetify I18n](https://vuetifyjs.com/en/features/internationalization/#getting-started) documentation:
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
2424
locale: 'zhHans',
2525
fallback: 'sv',
2626
},
27-
loadMessages: ['zhHans', 'pl'],
27+
localeMessages: ['zhHans', 'pl'],
2828
/* other vuetify options */
2929
}
3030
}
@@ -58,7 +58,7 @@ export default defineNuxtConfig({
5858
}
5959
}
6060
},
61-
loadMessages: ['zhHans', 'pl'],
61+
localeMessages: ['zhHans', 'pl'],
6262
/* other vuetify options */
6363
}
6464
}

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@
5252
"dev:build:multiple-json": "MULTIPLE_LANG_FILES=true nuxi build playground",
5353
"dev:generate:multiple-json": "MULTIPLE_LANG_FILES=true nuxi generate playground",
5454
"dev:preview": "nuxi preview playground",
55+
"dev:prepare:date-io": "nuxt-module-build build --stub && nuxt-module-build prepare && pnpm nuxt prepare date-io-playground",
56+
"dev:date-io": "nuxi dev date-io-playground",
5557
"docs:dev": "pnpm -C docs run dev",
5658
"docs:build": "nuxt-module-build prepare && pnpm -C docs run build",
5759
"docs:serve": "pnpm -C docs run serve",
@@ -72,7 +74,7 @@
7274
"ufo": "^1.3.1",
7375
"unconfig": "^0.3.11",
7476
"vite-plugin-vuetify": "^1.0.2",
75-
"vuetify": "^3.4.3"
77+
"vuetify": "^3.4.6"
7678
},
7779
"devDependencies": {
7880
"@antfu/eslint-config": "^0.43.1",

‎playground/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"@iconify-json/mdi": "^1.1.55",
1616
"@mdi/js": "^7.3.67",
1717
"luxon": "^3.4.3",
18-
"vuetify": "^3.4.3"
18+
"vuetify": "^3.4.6"
1919
},
2020
"devDependencies": {
2121
"@nuxtjs/i18n": "npm:@nuxtjs/i18n-edge",

‎playground/vuetify.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ export default defineVuetifyConfiguration({
4444
},
4545
},
4646
date: {
47+
// adapter: 'date-fns',
4748
adapter: 'luxon',
4849
// adapter: 'vuetify',
4950
},

0 commit comments

Comments
 (0)