cleaned up locale loading

vue3/src/apps/tandoor/main.ts

@@ -18,7 +18,7 @@ import MealPlanPage from "@/pages/MealPlanPage.vue";
 import SearchPage from "@/pages/SearchPage.vue";
 import TestPage from "@/pages/TestPage.vue";
 import {createI18n, I18n} from "vue-i18n";
-import {getLocale, loadLocaleMessages, SUPPORT_LOCALES} from "@/i18n";
+import {getLocale, loadLocaleMessages, setupI18n, SUPPORT_LOCALES} from "@/i18n";
 
 const routes = [
     {path: '/', component: StartPage, name: 'view_home'},
@@ -37,23 +37,7 @@ const router = createRouter({
     routes,
 })
 
-let locale = document.querySelector('html')!.getAttribute('lang')
+let i18n = setupI18n()
-if (locale == null || !SUPPORT_LOCALES.includes(locale)) {
-    console.log('falling back to en because ', locale, ' is not supported as a locale')
-    locale = 'en'
-}
-const localeMessages = await import((`../../locales/${locale}.json`))
-console.log(localeMessages, de)
-const i18n = createI18n({
-    legacy: false,
-    locale: 'en',
-    fallbackLocale: 'en',
-    messages: {
-        en
-    }
-}) as I18n
-
-loadLocaleMessages(i18n, locale).then(r => {})
 
 const app = createApp(App)
 

vue3/src/i18n.ts

@@ -7,6 +7,9 @@ import type {
     Composer,
     I18nMode
 } from 'vue-i18n'
+import de from "../../vue/src/locales/de.json";
+import {createI18n} from "vue-i18n";
+import en from "../../vue/src/locales/en.json";
 
 /**
  * lazy loading of translation, resources:
@@ -19,6 +22,53 @@ import type {
  */
 export const SUPPORT_LOCALES = getSupportedLocales()
 
+
+export function setupI18n() {
+    let locale = document.querySelector('html')!.getAttribute('lang')
+    if (locale == null || !SUPPORT_LOCALES.includes(locale)) {
+        console.warn('Falling back to locale en because ', locale, ' is not supported as a locale.')
+        locale = 'en'
+    }
+
+    // load i18n as with locale en by default
+    const i18n = createI18n({
+        legacy: false,
+        locale: 'en',
+        fallbackLocale: 'en',
+        messages: {
+            en
+        }
+    }) as I18n
+
+    // async load user locale into existing i18n instance
+    loadLocaleMessages(i18n, locale).then(r => {})
+
+    return i18n
+}
+
+
+/**
+ * load specified locale messages from server and set the locale as active
+ * @param i18n instance of Vue i18n
+ * @param locale string locale code to set (should be in SUPPORT_LOCALES)
+ */
+export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
+    // load locale messages
+    const messages = await import(`./locales/${locale}.json`).then(
+        getResourceMessages
+    )
+
+    // set messages for locale
+    i18n.global.setLocaleMessage(locale, messages)
+    // switch to given locale
+    setLocale(i18n, locale)
+
+    console.log('loaded user locale')
+
+    return nextTick()
+}
+
+
 /**
  * loop trough translation files to determine for which locales a translation is available
  * @return string[] of supported locales
@@ -37,7 +87,7 @@ function getSupportedLocales() {
  * @param instance
  * @param mode
  */
-function isComposer( instance: VueI18n | Composer, mode: I18nMode ): instance is Composer {
+function isComposer(instance: VueI18n | Composer, mode: I18nMode): instance is Composer {
     return mode === 'composition' && isRef(instance.locale)
 }
 
@@ -67,25 +117,4 @@ export function setLocale(i18n: I18n, locale: Locale): void {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getResourceMessages = (r: any) => r.default || r
+const getResourceMessages = (r: any) => r.default || r
-
-/**
- * load specified locale messages from server and set the locale as active
- * @param i18n instance of Vue i18n
- * @param locale string locale code to set (should be in SUPPORT_LOCALES)
- */
-export async function loadLocaleMessages(i18n: I18n, locale: Locale) {
-    // load locale messages
-    const messages = await import(`./locales/${locale}.json`).then(
-        getResourceMessages
-    )
-
-    // set messages for locale
-    i18n.global.setLocaleMessage(locale, messages)
-    // switch to given locale
-    setLocale(i18n, locale)
-
-    console.log('loaded user locale')
-
-    return nextTick()
-}