fix: fix loading locales

Author: xiaoluoboding

src/composables/useLanguage.ts

@@ -2,6 +2,8 @@ import { en } from '@supabase/auth-ui-shared'
 import { useI18n } from 'vue-i18n'
 import cloneDeep from 'lodash.clonedeep'
 
+import { loadLanguageAsync, availableLocales } from '~/plugins/i18n'
+
 const sign_up = {
   email_label: '邮箱地址',
   password_label: '密码',
@@ -67,15 +69,19 @@ const zh = {
 }
 
 const useLanguage = () => {
-  const { locale, availableLocales } = useI18n()
+  const { locale } = useI18n()
 
   const toggleLocales = () => {
     const locales = availableLocales
-    locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
+    const newLocale =
+      locales[(locales.indexOf(locale.value) + 1) % locales.length]
+    loadLanguageAsync(newLocale)
+    locale.value = newLocale
   }
   return {
     en: cloneDeep(en),
     zh: cloneDeep(zh),
+    availableLocales,
     toggleLocales
   }
 }

src/plugins/i18n.ts

@@ -1,35 +1,39 @@
 import type { App } from 'vue'
+import type { Locale } from 'vue-i18n'
 import { createI18n } from 'vue-i18n'
 import { useLocalStorage } from '@vueuse/core'
 
-const localPathPrefix = '../locales/'
-
 const storage = useLocalStorage('otg-options', {}) as any
 const locale = storage.value?.apperance?.language
 
 // import i18n resources
-// https://vitejs.dev/guide/features.html#glob-import
-const messages = Object.fromEntries(
-  Object.entries(import.meta.globEager('../locales/*.y(a)?ml')).map(
-    ([key, value]) => {
-      const yaml = key.endsWith('.yaml')
-      return [
-        key.slice(localPathPrefix.length, yaml ? -5 : -4),
-        value?.default!
-      ]
+const localesMap = Object.fromEntries(
+  Object.entries(import.meta.glob('../locales/*.yml')).map(
+    ([path, loadLocale]) => {
+      console.log(path)
+      return [path.match(/([\w-]*)\.yml$/)?.[1], loadLocale]
     }
   )
 )
 
-const install = (app: App) => {
-  const i18n = createI18n({
-    legacy: false,
-    locale,
-    globalInjection: true,
-    messages
-  })
+export const availableLocales = Object.keys(localesMap)
+
+const i18n = createI18n({
+  legacy: false,
+  locale,
+  globalInjection: true,
+  messages: {}
+})
 
+export async function loadLanguageAsync(lang: string): Promise<Locale> {
+  const messages = await localesMap[lang]()
+  i18n.global.setLocaleMessage(lang, messages.default)
+  return lang
+}
+
+const install = (app: App) => {
   app.use(i18n)
+  loadLanguageAsync('en-US')
 }
 
 export default install