diff --git a/src/App.vue b/src/App.vue index 806c33e4..775769d9 100644 --- a/src/App.vue +++ b/src/App.vue @@ -70,9 +70,30 @@ export default { this.isLoading = false; } }, + /* Checks local storage, then appConfig, and if a custom language is specified, its applied */ + applyLanguage() { + // If user has specified a language, then check and apply it + const lang = localStorage[localStorageKeys.LANGUAGE] || this.appConfig.language; + if (lang && this.$i18n.availableLocales.includes(lang)) { + this.$i18n.locale = lang; + } else { + // Attempt to apply language automatically, based on their system language + let locale; + const usersBorwserLang1 = window.navigator.language || ''; // e.g. en-GB or or '' + const usersBorwserLang2 = usersBorwserLang1.split('-')[0]; // e.g. en or undefined + const availibleLocales = this.$i18n.availableLocales; + if (availibleLocales.includes(usersBorwserLang1)) { + locale = usersBorwserLang1; + } else if (availibleLocales.includes(usersBorwserLang2)) { + locale = usersBorwserLang2; + } + if (locale) this.$i18n.locale = locale; // If lanuage was found, apply it + } + }, }, /* When component mounted, hide splash and initiate the injection of custom styles */ mounted() { + this.applyLanguage(); this.hideSplash(); if (this.appConfig.customCss) { const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, ''); diff --git a/src/main.js b/src/main.js index 6de769f3..7af5b0aa 100644 --- a/src/main.js +++ b/src/main.js @@ -14,7 +14,7 @@ import Dashy from '@/App.vue'; import router from '@/router'; import registerServiceWorker from '@/registerServiceWorker'; import clickOutside from '@/utils/ClickOutside'; -import { toastedOptions } from '@/utils/defaults'; +import { toastedOptions, language as defaultLanguage } from '@/utils/defaults'; import { messages } from '@/utils/languages'; Vue.use(VueI18n); @@ -29,8 +29,8 @@ Vue.config.productionTip = false; // Setup i18n translations const i18n = new VueI18n({ - locale: 'en-GB', - fallbackLocale: 'en-GB', + locale: defaultLanguage, + fallbackLocale: defaultLanguage, messages, });