feat: add link based language switch

Author: blouflashdb

app/pages/index.vue

@@ -1,18 +1,26 @@
 <script setup lang="ts">
-const runtimeConfig = useRuntimeConfig()
-const colors = ['#f87171', '#fb923c', '#fbbf24', '#facc15', '#a3e635', '#4ade80', '#34d399', '#2dd4bf', '#22d3ee', '#38bdf8', '#60a5fa', '#818cf8', '#a78bfa', '#c084fc', '#e879f9', '#f472b6', '#fb7185']
-const color = useState('color', () => colors[Math.floor(Math.random() * colors.length)])
-const { t } = useI18n()
+const { t, locale, locales } = useI18n()
+const switchLocalePath = useSwitchLocalePath()
+
+const availableLocales = computed(() => {
+  return locales.value.filter(i => i.code !== locale.value)
+})
 </script>
 
 <template>
-  <div class="centered">
-    <h1 :style="{ color }">
-      {{ runtimeConfig.public.helloText }}
-    </h1>
-    <NuxtLink to="/" external>
-      {{ t('Refresh') }}
-    </NuxtLink>
+  <div>
+    <nav>
+      <NuxtLink v-for="availableLocale in availableLocales" :key="availableLocale.code" :to="switchLocalePath(availableLocale.code)">
+        {{ t(`Locales.${availableLocale.code}`) }}
+      </NuxtLink>
+    </nav>
+    <main>
+      <div class="centered">
+        <NuxtLink to="/" external>
+          {{ t('Refresh') }}
+        </NuxtLink>
+      </div>
+    </main>
   </div>
 </template>
 

i18n/locales/de.json

@@ -1,3 +1,8 @@
 {
-  "Refresh": "Aktualisieren"
+  "Refresh": "Aktualisieren",
+  "Locales": {
+    "en": "Englisch",
+    "es": "Spanisch",
+    "de": "Deutsch"
+  }
 }

i18n/locales/en.json

@@ -1,3 +1,8 @@
 {
-  "Refresh": "Refresh"
+  "Refresh": "Refresh",
+  "Locales": {
+    "en": "English",
+    "es": "Spanish",
+    "de": "German"
+  }
 }

i18n/locales/es.json

@@ -1,3 +1,8 @@
 {
-  "Refresh": "Refrescar"
+  "Refresh": "Refrescar",
+  "Locales": {
+    "en": "Inglés",
+    "es": "Español",
+    "de": "Alemán"
+  }
 }