dayjsのフォーマットをi18nと連動するようにする

Author: kaizumaki

nuxt-i18n.config.js

@@ -15,16 +15,19 @@ const options = {
       code: 'ja',
       displayName: '日本語',
       file: 'ja.json',
+      format: 'ja',
     },
     {
       code: 'en',
       displayName: 'English',
       file: 'en.json',
+      format: 'en',
     },
     {
       code: 'zh-goyu',
       displayName: '台灣華語',
       file: 'zh_TW.json',
+      format: 'zh-tw',
     },
   ],
 }

nuxt.config.js

@@ -128,7 +128,7 @@ export default {
     locales: ['ja', 'en', 'zh-tw'],
     defaultLocale: 'ja',
     defaultTimeZone: 'Asia/Tokyo',
-    plugins: ['utc', 'timezone', 'minMax'],
+    plugins: ['utc', 'timezone', 'minMax', 'localizedFormat'],
   },
   /*
    ** Axios module configuration

src/components/AppLanguageSelector.vue

@@ -15,23 +15,28 @@
 <script lang="ts">
 import Vue from 'vue'
 
-type LocaleListItem = { text: string; value: string }
+type LocaleListItem = { text: string; value: string; format: string }
 type LocalData = {
   locales: LocaleListItem[]
 }
 
 export default Vue.extend({
   data(): LocalData {
     if (!this.$root.$i18n.locales)
-      return { locales: [{ text: 'N/A', value: '' }] }
+      return { locales: [{ text: 'N/A', value: '', format: '' }] }
 
     return {
       locales: this.$root.$i18n.locales.map((l) => {
-        if (typeof l === 'string') return { text: l, value: l }
-        else return { text: l.displayName, value: l.code }
+        if (typeof l === 'string') return { text: l, value: l, format: l }
+        else return { text: l.displayName, value: l.code, format: l.format }
       }),
     }
   },
+  watch: {
+    '$root.$i18n.locale'(locale) {
+      this.$dayjs.locale(this.locales?.find((v) => v.value === locale)?.format)
+    },
+  },
 })
 </script>