✨ Auto loads users prefered language

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, '');

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',
+  locale: defaultLanguage,
-  fallbackLocale: 'en-GB',
+  fallbackLocale: defaultLanguage,
   messages,
 });