[wip] lazy load language file

This commit is contained in:
Louis Lam 2021-11-26 16:31:19 +08:00
parent 9f0c66d775
commit 50593f3edf
4 changed files with 68 additions and 62 deletions

View file

@ -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>

View file

@ -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,
});

View file

@ -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 {

27
src/mixins/lang.js Normal file
View file

@ -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();
}
}
};