[wip] lazy load language file

src/components/settings/Appearance.vue

@@ -4,7 +4,7 @@
             <label for="language" class="form-label">
                 {{ $t("Language") }}
             </label>
-            <select id="language" v-model="$i18n.locale" class="form-select">
+            <select id="language" v-model="$root.language" class="form-select">
                 <option
                     v-for="(lang, i) in $i18n.availableLocales"
                     :key="`Lang${i}`"
@@ -116,14 +116,8 @@
 </template>
 
 <script>
-import { setPageLocale } from "../../util-frontend";
 export default {
-    watch: {
-        "$i18n.locale"() {
-            localStorage.locale = this.$i18n.locale;
-            setPageLocale();
-        },
-    },
+
 };
 </script>
 

src/i18n.js

@@ -1,62 +1,45 @@
 import { createI18n } from "vue-i18n/index";
-import daDK from "./languages/da-DK";
-import deDE from "./languages/de-DE";
 import en from "./languages/en";
-import esEs from "./languages/es-ES";
-import etEE from "./languages/et-EE";
-import fa from "./languages/fa";
-import frFR from "./languages/fr-FR";
-import hu from "./languages/hu";
-import hrHR from "./languages/hr-HR";
-import itIT from "./languages/it-IT";
-import idID from "./languages/id-ID";
-import ja from "./languages/ja";
-import koKR from "./languages/ko-KR";
-import nlNL from "./languages/nl-NL";
-import nbNO from "./languages/nb-NO";
-import pl from "./languages/pl";
-import ptBR from "./languages/pt-BR";
-import bgBG from "./languages/bg-BG";
-import ruRU from "./languages/ru-RU";
-import sr from "./languages/sr";
-import srLatn from "./languages/sr-latn";
-import svSE from "./languages/sv-SE";
-import trTR from "./languages/tr-TR";
-import vi from "./languages/vi";
-import zhCN from "./languages/zh-CN";
-import zhHK from "./languages/zh-HK";
-import zhTW from "./languages/zh-TW";
 
 const languageList = {
-    en,
-    "zh-HK": zhHK,
-    "bg-BG": bgBG,
-    "de-DE": deDE,
-    "nl-NL": nlNL,
-    "nb-NO": nbNO,
-    "es-ES": esEs,
-    "fa": fa,
-    "pt-BR": ptBR,
-    "fr-FR": frFR,
-    "hu": hu,
-    "hr-HR": hrHR,
-    "it-IT": itIT,
-    "id-ID" : idID,
-    "ja": ja,
-    "da-DK": daDK,
-    "sr": sr,
-    "sr-latn": srLatn,
-    "sv-SE": svSE,
-    "tr-TR": trTR,
-    "ko-KR": koKR,
-    "ru-RU": ruRU,
-    "zh-CN": zhCN,
-    "pl": pl,
-    "et-EE": etEE,
-    "vi": vi,
-    "zh-TW": zhTW
+    "zh-HK": "繁體中文 (香港)",
+    "bg-BG": "Български",
+    "de-DE": "Deutsch (Deutschland)",
+    "nl-NL": "Nederlands",
+    "nb-NO": "Norsk",
+    "es-ES": "Español",
+    "fa": "Farsi",
+    "pt-BR": "Português (Brasileiro)",
+    "fr-FR": "Français (France)",
+    "hu": "Magyar",
+    "hr-HR": "Hrvatski",
+    "it-IT": "Italiano (Italian)",
+    "id-ID": "Bahasa Indonesia (Indonesian)",
+    "ja": "日本語",
+    "da-DK": "Danish (Danmark)",
+    "sr": "Српски",
+    "sr-latn": "Srpski",
+    "sv-SE": "Svenska",
+    "tr-TR": "Türkçe",
+    "ko-KR": "한국어",
+    "ru-RU": "Русский",
+    "zh-CN": "简体中文",
+    "pl": "Polski",
+    "et-EE": "eesti",
+    "vi": "Vietnamese",
+    "zh-TW": "繁體中文 (台灣)"
 };
 
+let messages = {
+    en,
+};
+
+for (let lang in languageList) {
+    messages[lang] = {
+        languageName: languageList[lang]
+    };
+}
+
 const rtlLangs = ["fa"];
 
 export const currentLocale = () => localStorage.locale
@@ -73,5 +56,5 @@ export const i18n = createI18n({
     fallbackLocale: "en",
     silentFallbackWarn: true,
     silentTranslationWarn: true,
-    messages: languageList,
+    messages: messages,
 });

src/main.js

@@ -12,6 +12,7 @@ import mobile from "./mixins/mobile";
 import publicMixin from "./mixins/public";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
+import lang from "./mixins/lang";
 import { router } from "./router";
 import { appName } from "./util.ts";
 
@@ -22,6 +23,7 @@ const app = createApp({
         mobile,
         datetime,
         publicMixin,
+        lang,
     ],
     data() {
         return {

src/mixins/lang.js

@@ -0,0 +1,27 @@
+import { currentLocale } from "../i18n";
+import { setPageLocale } from "../util-frontend";
+const langModules = import.meta.glob("../languages/*.js");
+
+export default {
+    data() {
+        return {
+            language: currentLocale(),
+        };
+    },
+
+    watch: {
+        async language(lang) {
+            await this.changeLang(lang);
+        },
+    },
+
+    methods: {
+        async changeLang(lang) {
+            let message = (await langModules["../languages/" + lang + ".js"]()).default;
+            this.$i18n.setLocaleMessage(lang, message);
+            this.$i18n.locale = lang;
+            localStorage.locale = lang;
+            setPageLocale();
+        }
+    }
+};