fix(example): lazy-loading example

Author: kazupon

examples/lazy-loading/vite/package.json

@@ -8,16 +8,16 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.0",
+    "vue": "next",
     "vue-i18n": "workspace:*",
-    "vue-router": "^4.0.8"
+    "vue-router": "next"
   },
   "devDependencies": {
-    "@intlify/vite-plugin-vue-i18n": "^2.4.0",
-    "@vitejs/plugin-vue": "^1.9.3",
-    "@vue/compiler-sfc": "^3.2.0",
-    "vite": "^2.6.0",
-    "vue-tsc": "^0.3.0"
+    "@intlify/vite-plugin-vue-i18n": "next",
+    "@vitejs/plugin-vue": "^1.9.4",
+    "@vue/compiler-sfc": "latest",
+    "vite": "^2.6.14",
+    "vue-tsc": "^0.29.6"
   },
   "private": true
 }

examples/lazy-loading/vite/src/App.vue

@@ -37,7 +37,7 @@ export default defineComponent({
   name: 'App',
   setup() {
     const router = useRouter()
-    const { t, locale } = useI18n({ useScope: 'global' })
+    const { t, locale } = useI18n() // same as `useI18n({ useScope: 'global' })`
 
     /**
      * select locale value for language select form

examples/lazy-loading/vite/src/i18n.ts

@@ -1,22 +1,32 @@
 import { nextTick } from 'vue'
 import { createI18n } from 'vue-i18n'
 
-import type { I18n, I18nOptions, Composer } from 'vue-i18n'
+import type { I18n, I18nOptions, Locale, VueI18n, Composer } from 'vue-i18n'
 
 export const SUPPORT_LOCALES = ['en', 'ja']
 
+export function getLocale(i18n: I18n): string {
+  return i18n.mode === 'legacy'
+    ? (i18n.global as unknown as VueI18n).locale
+    : (i18n.global as unknown as Composer).locale.value
+}
+
+export function setLocale(i18n: I18n, locale: Locale): void {
+  if (i18n.mode === 'legacy') {
+    ;(i18n.global as unknown as VueI18n).locale = locale
+  } else {
+    ;(i18n.global as unknown as Composer).locale.value = locale
+  }
+}
+
 export function setupI18n(options: I18nOptions = { locale: 'en' }): I18n {
   const i18n = createI18n(options)
   setI18nLanguage(i18n, options.locale!)
   return i18n
 }
 
-export function setI18nLanguage(i18n: I18n, locale: string): void {
-  if (i18n.mode === 'legacy') {
-    i18n.global.locale = locale
-  } else {
-    ;((i18n.global as unknown) as Composer).locale.value = locale
-  }
+export function setI18nLanguage(i18n: I18n, locale: Locale): void {
+  setLocale(i18n, locale)
   /**
    * NOTE:
    * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
@@ -27,12 +37,17 @@ export function setI18nLanguage(i18n: I18n, locale: string): void {
   document.querySelector('html')!.setAttribute('lang', locale)
 }
 
-export async function loadLocaleMessages(i18n: I18n, locale: string) {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getResourceMessages = (r: any) => r.default || r
+
+export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
   // load locale messages
-  const messages = await import(/* @vite-ignore */ `./locales/${locale}.yaml`)
+  const messages = await import(
+    /* @vite-ignore */ `./locales/${locale}.json`
+  ).then(getResourceMessages)
 
   // set locale and locale message
-  i18n.global.setLocaleMessage(locale, messages.default)
+  i18n.global.setLocaleMessage(locale, messages)
 
   return nextTick()
 }

examples/lazy-loading/vite/src/locales/en.json

@@ -0,0 +1,13 @@
+{
+  "pages": {
+    "home": "This page is home page",
+    "about": "This page is about page"
+  },
+  "navigations": {
+    "home": "Home",
+    "about": "About"
+  },
+  "labels": {
+    "language": "Languages"
+  }
+}

examples/lazy-loading/vite/src/locales/en.yaml

@@ -0,0 +1,13 @@
+{
+  "pages": {
+    "home": "このページはホームです。",
+    "about": "このページはアバウトページです。"
+  },
+  "navigations": {
+    "home": "ホーム",
+    "about": "アバウト"
+  },
+  "labels": {
+    "language": "言語"
+  }
+}

examples/lazy-loading/vite/src/locales/ja.json

@@ -3,7 +3,7 @@ import App from './App.vue'
 import './index.css'
 import { setupRouter } from './router'
 import { setupI18n } from './i18n'
-import en from './locales/en.yaml'
+import en from './locales/en.json'
 
 const i18n = setupI18n({
   legacy: false,

examples/lazy-loading/vite/src/locales/ja.yaml

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n() // same as `useI18n({ useScope: 'global' })`
 </script>
 
 <template>

examples/lazy-loading/vite/src/main.ts

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-const { t } = useI18n({ useScope: 'global' })
+const { t } = useI18n() // same as `useI18n({ useScope: 'global' })`
 </script>
 
 <template>