Jeziki, WIP izbor jezika, store za stanje strani

nuxt/components/IzborJezika.vue

@@ -0,0 +1,41 @@
+<script setup="setup">
+
+const store = useNastavitveStore()
+
+const izbraniJezik = computed(() => store.izbraniJezik)
+const kodeJezikov = computed(() => Object.keys(store.mozniJeziki))
+const kodeDrugihJezikov = computed(() => kodeJezikov.value.filter(
+  (jezik) => jezik !== store.izbraniJezik
+))
+const slikaJezika = (jezik) => `/images/jezik_${jezik}.png`
+
+console.log('izbrani jezik!', izbraniJezik.value)
+
+const izbor = ref(false)
+
+</script>
+
+<template>
+  <div class="izbor">
+    <div @click="izbor = !izbor">
+      <img :src="slikaJezika(izbraniJezik)" /> {{ store.mozniJeziki[izbraniJezik] }}
+    </div>
+
+    <div class="drugiJeziki" v-if="izbor">
+      <div class="jezik" v-for="jezik in kodeDrugihJezikov" @click="() => { store.izberiJezik(jezik); izbor = false }">
+        <img :src="slikaJezika(jezik)" /> {{ store.mozniJeziki[jezik] }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.izbor {
+  width: 7rem;
+  cursor: pointer;
+}
+img {
+  position: relative;
+  top: 5px;
+}
+</style>

nuxt/lang/en-US.json

@@ -0,0 +1,4 @@
+{
+  "domov": "home",
+  "jugofuturizem": "yugofuturism"
+}

nuxt/lang/en.json

@@ -0,0 +1,4 @@
+{
+  "domov": "home",
+  "jugofuturizem": "yugofuturism"
+}

nuxt/lang/hr.json

@@ -0,0 +1,3 @@
+{
+  "jugofuturizem": "jugofuturizem"
+}

nuxt/lang/si.json

@@ -0,0 +1,3 @@
+{
+  "jugofuturizem": "jugofuturizem"
+}

nuxt/stores/nastavitve.js

@@ -0,0 +1,19 @@
+export const useNastavitveStore = defineStore('nastavitve', {
+  state: () => ({
+    izbraniJezik: 'hr',
+    mozniJeziki: {
+      si: 'Slovensko',
+      hr: 'Hrvatski',
+      en: 'English'
+    }
+  }),
+  actions: {
+    izberiJezik(jezik) {
+      if (Object.keys(this.mozniJeziki).indexOf(jezik) >= 0) {
+        this.izbraniJezik = jezik
+        console.log(useNuxtApp().$i18n.availableLocales)
+        //useNuxtApp().$i18n.setLocale(jezik)
+      }
+    }
+  }
+})