gestionar idioma con states de vuex

pages/[langcode]/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div>
+    <h1>{{ content.title }}</h1>
+    <p>{{ content.body }}</p>
+  </div>
+
+    <p>Idioma actual: {{ $store.getters['langcode'] }}</p>
+    <p>Ruta actual: {{ $route.params.langcode }}</p>
+    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" @click="cambiarIdioma">
+      {{ $store.getters['langcode'] === 'es' ? 'Cambiar a Català' : 'Canviar a espanyol' }}
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+export default {
+  data() {
+    return {
+      content: {},
+    };
+  },
+  computed: {
+    ...mapGetters(['langcode']),
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/index.json`);
+      this.content = res.default;
+    } catch (err) {
+      console.error('Error al cargar contenido:', err);
+      this.content = {
+        title: 'Contenido no disponible',
+        body: 'No se pudo cargar el contenido.',
+      };
+    }
+  },
+  methods: {
+    ...mapActions(['setLangcode']),
+    cambiarIdioma() {
+      const nuevoIdioma = this.langcode === 'es' ? 'cat' : 'es';
+      this.setLangcode(nuevoIdioma);
+      this.$router.push({ path: `/${nuevoIdioma}` });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

pages/index.vue

@@ -1,21 +1,15 @@
-<template>
-  <div class="text-center max-w-xl mx-auto flex flex-col items-center justify-center h-screen">
-      <h1 class="text-2xl md:text-3xl font-medium leading-snug">
-        Estamos mejorando el Kit,<br/>
-        pronto estarán disponibles todas sus herramientas.
-      </h1>
+<script>
+export default {
+  data() {
+    return {
+      lang: '',
+    };
+  },
+  mounted() {
+    const langcode = this.$store.getters['langcode'];
+    this.lang = langcode;
 
-      <!-- Texto secundario -->
-      <p class="mt-6 text-base text-gray-700">
-        Síguenos en
-        <a
-          href="https://www.instagram.com/kitecosocial/"
-          class="text-[#5636d0] font-medium hover:underline"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          @kit-eco.social
-        </a>
-      </p>
-    </div>
-</template>
+    this.$router.replace(`/${langcode}`);
+  },
+};
+</script>