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>