Merge pull request #966 from louislam/lazy-load-lang

Lazy load language files

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 = {
+    "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,
-    "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
 };
 
+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/languages/README.md

@@ -5,10 +5,7 @@
 3. Run `npm run update-language-files`. You can also use this command to check if there are new strings to translate for your language.
 4. Your language file should be filled in. You can translate now.
 5. Translate `src/components/settings/Security.vue` (search for a `Confirm` component with `rel="confirmDisableAuth"`).
-6. Import your language file in `src/i18n.js` and add it to `languageList` constant.
+6. Add it into `languageList` constant.
 7. Make a [pull request](https://github.com/louislam/uptime-kuma/pulls) when you have done.
 
-One of good examples:
-https://github.com/louislam/uptime-kuma/pull/316/files
-
 If you do not have programming skills, let me know in [Issues section](https://github.com/louislam/uptime-kuma/issues). I will assist you. 😏

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,33 @@
+import { currentLocale } from "../i18n";
+import { setPageLocale } from "../util-frontend";
+const langModules = import.meta.glob("../languages/*.js");
+
+export default {
+    data() {
+        return {
+            language: currentLocale(),
+        };
+    },
+
+    async created() {
+        if (this.language !== "en") {
+            await this.changeLang(this.language);
+        }
+    },
+
+    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();
+        }
+    }
+};

src/pages/Settings.vue

@@ -44,8 +44,20 @@ export default {
 
             settings: {},
             settingsLoaded: false,
+        };
+    },
+
+    computed: {
+        currentPage() {
+            let pathEnd = useRoute().path.split("/").at(-1);
+            if (pathEnd == "settings" || pathEnd == null) {
+                return "general";
+            }
+            return pathEnd;
+        },
 
-            subMenus: {
+        subMenus() {
+            return {
                 general: {
                     title: this.$t("General"),
                 },
@@ -67,18 +79,8 @@ export default {
                 about: {
                     title: this.$t("About"),
                 },
-            },
             };
         },
-
-    computed: {
-        currentPage() {
-            let pathEnd = useRoute().path.split("/").at(-1);
-            if (pathEnd == "settings" || pathEnd == null) {
-                return "general";
-            }
-            return pathEnd;
-        },
     },
 
     mounted() {