detect locale

src/components/Menu.vue

@@ -22,8 +22,7 @@
 
                 <v-subheader>Visningsspråk</v-subheader>
                 <v-select rounded 
-                          :value="$store.state.currentLocale"
-                          @input="changeLocale"
+                          v-model="updateLocale"
                           prepend-inner-icon="language"
                           outlined
                           :items="locales"
@@ -66,7 +65,8 @@ export default {
     name: "Menu",
     data () {
         return {
-            locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}]
+            locales: [{text: "norsk (bokmål)", value: "nob"}, {text: "norsk (nynorsk)", value: "nno"}, {text:"english", value: "eng"}],
+            localesMap: {"nob": "norsk (bokmål)", "nno": "norsk (nynorsk)", "eng": "english"}
         }
     },
     computed: {
@@ -85,15 +85,17 @@ export default {
             set () { this.$store.commit("toggle", "showInflectionNo")
             }
         },
+        updateLocale: {
+            get () { return {text: this.localesMap[this.$store.state.currentLocale], value: this.$store.state.currentLocale}}, 
+            set(value) {
+              this.$store.commit("setLocale", {value: value, i18n: this._i18n})
+              }
+        }
 
     },
     methods: {
-        changeLocale: function(event) {
-            console.log(event)
-
-        },
         resetStore: function() {
-          this.$store.dispatch("resetStore")
+          this.$store.commit("resetStore")
 
         }
     }

src/main.js

@@ -19,6 +19,7 @@ Vue.use(VuePlausible, {
 
 Vue.$plausible.enableAutoPageviews()
 
+// All interaction with local storage is encapsulated in vuex
 const store = new Vuex.Store({
   strict: true,
   state: {
@@ -32,28 +33,35 @@ const store = new Vuex.Store({
       state.showSearchToolbar = localStorage.getItem('showSearchToolbar') || false
       state.showHGNO = localStorage.getItem('showHGNO') || false
       state.showInflectionNo = localStorage.getItem('showInflectionNo') || false
-      state.currentLocale = localStorage.getItem('currentLocale') || {text:"norsk (bokmål)", value: "nob"}
+      state.currentLocale = localStorage.getItem('currentLocale')
+
+      let locales = navigator.languages.map(l => l.split("-")[0])
+      if (!state.currentLocale) {
+        if (locales.includes("nn")) state.currentLocale = "nno"
+        else if (locales.includes("nb")) state.currentLocale = "nob"
+        else if (locales.includes("no")) state.currentLocale = "nob"
+        else state.currentLocale = "eng"
+      }
     },
-    changeLocale(state, locale, i18n) {
-      state.currentLocale = locale
-      i18n.locale = locale
-      localStorage.setItem("currentLocale", locale);
+    setLocale(state, payload) {
+      state.currentLocale = payload.value
+      payload.i18n.locale = payload.value
+      localStorage.setItem("currentLocale", payload.value);
     },
     toggle(state, setting) {
       let value = !state[setting]
       state[setting] = value
       localStorage.setItem(setting, value);
-    }
-  },
-  actions: {
-    resetStore(context) {
+    },
+    resetStore() {
       localStorage.removeItem("showSearchToolbar")
       localStorage.removeItem("showHGNO")
       localStorage.removeItem("showInflectionNo")
       localStorage.removeItem("currentLocale")
-      context.commit("initStore")
+      this.commit("initStore")
     },
-  }
+
+  },
 })
 
 const router = new VueRouter({