Show dialog if locale not detected

src/App.vue

 <template>
   <v-app id="app">
+            <div v-if="no_locale">
+    <v-dialog overlay-opacity="1" overlay-color="tertiary" persistent max-width="600px" v-if="!this.$store.state.currentLocale" v-model="no_locale">
+        <v-card>
+          <v-toolbar elevation="0" color="primary" text>
+            <v-toolbar-title class="language-dialog-title">Ordbøkene</v-toolbar-title></v-toolbar>
+          <v-card-text class="text--primary">
+            <v-list three-line>
+              <v-list-item link v-on:click="choose_locale('eng')">
+                <v-list-item-content>
+                  <v-list-item-title>English</v-list-item-title>
+                  <v-list-item-subtitle>Choose english as display language for buttons and menus</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item link v-on:click="choose_locale('nno')">
+                <v-list-item-content>
+                  <v-list-item-title>Norsk (nynorsk)</v-list-item-title>
+                  <v-list-item-subtitle>Vis knappar og menyar på nynorsk</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item link v-on:click="choose_locale('nob')">
+                <v-list-item-content>
+                  <v-list-item-title>Norsk (bokmål)</v-list-item-title>
+                  <v-list-item-subtitle>Vis knapper og menyer på bokmål</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>            
+            </v-list>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+    </div>
     <header>
       <TopBar/>
     </header>
@@ -24,17 +54,30 @@
       </div>
       <div>Bokmålsordboka og Nynorskordboka viser skrivemåte og bøying i tråd med norsk rettskriving. Språkrådet og Universitetet i Bergen står bak ordbøkene. Gi oss gjerne tilbakemelding på <a href="mailto:ordbok-beta@uib.no">ordbok-beta@uib.no</a>.</div>
     </footer>
-    
   </v-app>
 </template>
 <script>
 import TopBar from './components/TopBar.vue'
 
   export default {
+    computed: {
+      no_locale: function() {
+        return !this.$store.state.locale
+      }
+    },
     mounted: function(){
-      this._i18n.locale = this.$store.state.currentLocale
+      if (!this.no_locale) {
+        this._i18n.locale = this.$store.state.locale      
+      }
       document.title = 'Ordbøkene - ' + process.env.VUE_APP_VERSION_LABEL
     },
+    methods: {
+      choose_locale: function(locale) {
+        this.locale_chosen = true
+        this.$store.commit("setLocale", {value: locale, i18n: this._i18n})
+      }
+
+    },
     components: {
       TopBar
     }
@@ -62,6 +105,7 @@ import TopBar from './components/TopBar.vue'
   display: flex;
   flex-direction: column;
   height: 100%;
+  background-color: var(--v-tertiary-base)
 }
 
 html, body {
@@ -115,14 +159,12 @@ h1 > a.xs, h1 > a.sm {
   margin-left: 10px;
 }
 
-.about-link > a{
-  border-bottom: solid var(--v-primary-base) 2px;
-  font-size: 12px;
-  color: var(--v-primary-base) !important;
+.language-dialog-title {
+  font-family: Inria Serif;
+  color: white;
 }
 
 
-
 footer {
   position: relative;
   padding-left: calc((100vw - 1200px) / 2);

src/main.js

@@ -108,12 +108,11 @@ const store = new Vuex.Store({
       state.collapseArticles = localStorage.getItem('collapseArticles') || window.innerWidth < 700
       state.noMouse = window.matchMedia('(hover: none)').matches
 
-      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"
+        let locale = navigator.language.split("-")[0]
+        if (locale == "nn") state.currentLocale = "nno"
+        else if (locale == "nb") state.currentLocale = "nob"
       }
 
     },