Resolve "set default language based on user browser header"

src/App.vue

@@ -40,29 +40,12 @@ export default {
   data() {
     return {
       loading: true,
-    };
+      browserLanguage: null,
+      availableJsonTranslation: null
+    }
   },
   beforeMount() {
-    if (!this.$store.state.language) {
+    this.setDefaultLanguage();
-      // No language set, default to browser language?
-      var browserLang = (
-        navigator.language ||
-        navigator.userLanguage ||
-        ""
-      ).toLowerCase();
-      if (this.$i18n.messages[browserLang]) {
-        this.$store.commit("setLanguage", browserLang);
-      } else if (browserLang.includes("-")) {
-        // Try with language name only.
-        let lang = browserLang.split("-")[0];
-        if (this.$i18n.messages[lang]) {
-          this.$store.commit("setLanguage", lang);
-        }
-      }
-    }
-
-    // Set language
-    this.$i18n.locale = this.$store.state.language || "en";
   },
   mounted() {
     /**
@@ -98,6 +81,30 @@ export default {
         stickers.loadStickersFromConfig(config);
       }
     },
+    setDefaultLanguage() {
+      let LocalesArr= Object.keys(this.$i18n.messages);
+      // No language set, default to browser language?
+      this.browserLanguage = (navigator.language ||navigator.userLanguage ||"").toLowerCase();
+      // Try with language name only.
+      let lang = this.browserLanguage.split("-")[0];
+      // Assigns available language for ex 'zh_Hans' when browser header language is 'zh' or 'zh-HK'
+      this.availableJsonTranslation= LocalesArr[LocalesArr.findIndex(locale => locale.includes(lang))];
+
+      if (this.$i18n.messages[this.browserLanguage]) {
+        this.$store.commit("setLanguage", this.browserLanguage);
+      } else if (this.browserLanguage.includes("-")) {
+        if (this.$i18n.messages[lang]) {
+          this.$store.commit("setLanguage", lang);
+        } else {
+          this.$store.commit("setLanguage", this.availableJsonTranslation);
+        }
+      } else {
+        this.$store.commit("setLanguage", this.availableJsonTranslation);
+      }
+
+      // Set language
+      this.$i18n.locale = this.$store.state.language || "en";
+    }
   },
   computed: {
     currentUser() {
@@ -187,7 +194,7 @@ export default {
 .main {
   @media #{map-get($display-breakpoints, 'lg-and-up')} {
     margin: 0 auto;
-    width: $main-desktop-width;;
+    width: $main-desktop-width;
   }
 }
 </style>