[筆記] Dayjs 與 vue-i18n 同步語系設定 @地瓜大的飛翔旅程

章節連結

內容

筆記一下 Dayjs 如何與 vue-i18n 同步設定，讓兩邊的語系可以同步。

內容

Dayjs 部分在初始化時，要載入 vue-i18n 那邊所定的語系 key，並用其製作 dayjs 的語系對照表 ( map )。

另外再自行撰寫一個 setDayjsLocale 的方法，於 vue-i18n 切換語言時一起觸發即可

import 'dayjs/locale/en'
import 'dayjs/locale/zh-tw'
import 'dayjs/locale/zh-cn'

import dayjs from 'dayjs'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import duration from 'dayjs/plugin/duration'
import isBetween from 'dayjs/plugin/isBetween'
import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
import localizedFormat from 'dayjs/plugin/localizedFormat'
import minMax from 'dayjs/plugin/minMax'
import relativeTime from 'dayjs/plugin/relativeTime'
import timezone from 'dayjs/plugin/timezone'
import utc from 'dayjs/plugin/utc'

import { LocaleMap } from '~/plugins/lang'

dayjs.extend(isBetween)
dayjs.extend(utc)
dayjs.extend(duration)
dayjs.extend(relativeTime)
dayjs.extend(customParseFormat)
dayjs.extend(localizedFormat)
dayjs.extend(timezone)
dayjs.extend(isSameOrBefore)
dayjs.extend(isSameOrAfter)
dayjs.extend(minMax)

const dayjsLocaleMap: Record<string, string> = {
  [LocaleMap.zhTw]: 'zh-tw',
  [LocaleMap.enUs]: 'en',
}

export const setDayjsLocale = (locale: string) => {
  const dayjsLocale = dayjsLocaleMap[locale]
  if (dayjsLocale) {
    dayjs.locale(dayjsLocale)
  }
}

export type DayjsType = ReturnType<typeof dayjs>
export { dayjs }

export default defineNuxtPlugin((nuxtApp) => {
  // 設定初始語言
  dayjs.locale(dayjsLocaleMap[LocaleMap.zhTw])
  nuxtApp.provide('dayjs', dayjs)
})

import 'dayjs/locale/en'

import 'dayjs/locale/zh-tw'

import 'dayjs/locale/zh-cn'

import dayjs from 'dayjs'

import customParseFormat from 'dayjs/plugin/customParseFormat'

import duration from 'dayjs/plugin/duration'

import isBetween from 'dayjs/plugin/isBetween'

import isSameOrAfter from 'dayjs/plugin/isSameOrAfter'

import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'

import localizedFormat from 'dayjs/plugin/localizedFormat'

import minMax from 'dayjs/plugin/minMax'

import relativeTime from 'dayjs/plugin/relativeTime'

import timezone from 'dayjs/plugin/timezone'

import utc from 'dayjs/plugin/utc'

import { LocaleMap } from '~/plugins/lang'

dayjs.extend(isBetween)

dayjs.extend(utc)

dayjs.extend(duration)

dayjs.extend(relativeTime)

dayjs.extend(customParseFormat)

dayjs.extend(localizedFormat)

dayjs.extend(timezone)

dayjs.extend(isSameOrBefore)

dayjs.extend(isSameOrAfter)

dayjs.extend(minMax)

const dayjsLocaleMap: Record<string, string> = {

[LocaleMap.zhTw]: 'zh-tw',

[LocaleMap.enUs]: 'en',

}

export const setDayjsLocale = (locale: string) => {

const dayjsLocale = dayjsLocaleMap[locale]

if (dayjsLocale) {

dayjs.locale(dayjsLocale)

}

export type DayjsType = ReturnType<typeof dayjs>

export { dayjs }

export default defineNuxtPlugin((nuxtApp) => {

// 設定初始語言

dayjs.locale(dayjsLocaleMap[LocaleMap.zhTw])

nuxtApp.provide('dayjs', dayjs)

})

import { setDayjsLocale } from '~/plugins/dayjs'

function changeI18NLang(lang: string) {
  const { vueApp } = useNuxtApp()
  vueApp.config.globalProperties.$i18n.locale = lang
  setDayjsLocale(lang)
}

import { setDayjsLocale } from '~/plugins/dayjs'

function changeI18NLang(lang: string) {

const { vueApp } = useNuxtApp()

vueApp.config.globalProperties.$i18n.locale = lang

setDayjsLocale(lang)

}

按讚加入粉絲團