Cutlery/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-09 03:04:54 -04:00
Code Issues Packages Projects Releases Wiki Activity

Lazy load translations (#561)

Browse Source 
* Lazy load translations

* Lazy load dateTimeFormats
This commit is contained in:
sephrat 2021-06-18 14:52:27 +02:00 committed by GitHub
parent 9d64345321
commit 93e6c0c41c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/i18n.js
View File

@ -1,33 +1,44 @@
import Vue from "vue";
import VueI18n from "vue-i18n";
import Vuetify from "@/plugins/vuetify";
import axios from 'axios';
Vue.use(VueI18n);
function parseLocaleFiles(locales) {
const messages = {};
locales.keys().forEach(key => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i);
if (matched && matched.length > 1) {
const locale = matched[1];
messages[locale] = locales(key);
}
});
return messages;
const i18n = new VueI18n();
export default i18n;
const loadedLanguages = [];
function setI18nLanguage (lang) {
i18n.locale = lang;
Vuetify.framework.lang.current = lang;
axios.defaults.headers.common['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
function loadLocaleMessages() {
const locales = require.context("./locales/messages", true, /[A-Za-z0-9-_,\s]+\.json$/i);
return parseLocaleFiles(locales);
export function loadLanguageAsync(lang) {
// If the same language
if (i18n.locale === lang) {
return Promise.resolve(setI18nLanguage(lang))
}
function loadDateTimeFormats() {
const locales = require.context("./locales/dateTimeFormats", true, /[A-Za-z0-9-_,\s]+\.json$/i);
return parseLocaleFiles(locales);
// If the language was already loaded
if (loadedLanguages.includes(lang)) {
return Promise.resolve(setI18nLanguage(lang))
}
export default new VueI18n({
locale: "en-US",
fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en-US",
messages: loadLocaleMessages(),
dateTimeFormats: loadDateTimeFormats(),
});
const messages = import(`./locales/messages/${lang}.json`);
const dateTimeFormats = import(`./locales/dateTimeFormats/${lang}.json`);
return Promise.all([messages, dateTimeFormats]).then(
values => {
i18n.setLocaleMessage(lang, values[0].default)
i18n.setDateTimeFormat(lang, values[1].default)
loadedLanguages.push(lang)
return setI18nLanguage(lang)
}
)
}

11
frontend/src/routes/index.js
View File

@ -6,8 +6,7 @@ import { mealRoutes } from "./meal";
import { generalRoutes } from "./general";
import { store } from "@/store";
import VueRouter from "vue-router";
import VueI18n from "@/i18n";
import Vuetify from "@/plugins/vuetify";
import { loadLanguageAsync } from "@/i18n"
import Vue from "vue";
import i18n from "@/i18n.js";
@ -45,14 +44,8 @@ router.afterEach(to => {
});
});
function loadLocale() {
VueI18n.locale = store.getters.getActiveLang;
Vuetify.framework.lang.current = store.getters.getActiveLang;
}
router.beforeEach((__, _, next) => {
loadLocale();
next();
loadLanguageAsync(store.getters.getActiveLang).then(() => next());
});
export { router };

6
frontend/src/store/modules/siteSettings.js
View File

@ -1,6 +1,5 @@
import { api } from "@/api";
import VueI18n from "@/i18n";
import Vuetify from "@/plugins/vuetify";
import { loadLanguageAsync } from "@/i18n"
const state = {
siteSettings: {
@ -16,8 +15,7 @@ const state = {
const mutations = {
setSettings(state, payload) {
state.siteSettings = payload;
VueI18n.locale = payload.language;
Vuetify.framework.lang.current = payload.language;
loadLanguageAsync(payload.language);
},
setCustomPages(state, payload) {
state.customPages = payload;