gestionar idioma con states de vuex

data/cat/index.json

@@ -0,0 +1,4 @@
+{
+  "title": "Benvingut",
+  "body": "Aquest és el contingut en català."
+}

data/es/index.json

@@ -0,0 +1,4 @@
+{
+  "title": "Bienvenido",
+  "body": "Este es el contenido en español."
+}

layouts/default.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div>
     <header>
       <NavBar />
     </header>
 
-    <main class="flex-1">
+    <main class="min-h-dvh">
       <slot />
     </main>
 

package-lock.json

@@ -13,7 +13,8 @@
         "nuxt": "^3.17.7",
         "tailwindcss": "^4.1.11",
         "vue": "^3.5.17",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "vuex": "^4.0.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -13465,6 +13466,18 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",

package.json

@@ -16,6 +16,7 @@
     "nuxt": "^3.17.7",
     "tailwindcss": "^4.1.11",
     "vue": "^3.5.17",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vuex": "^4.0.2"
   }
 }

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>
+<script>
-  <div class="text-center max-w-xl mx-auto flex flex-col items-center justify-center h-screen">
+export default {
-      <h1 class="text-2xl md:text-3xl font-medium leading-snug">
+  data() {
-        Estamos mejorando el Kit,<br/>
+    return {
-        pronto estarán disponibles todas sus herramientas.
+      lang: '',
-      </h1>
+    };
+  },
+  mounted() {
+    const langcode = this.$store.getters['langcode'];
+    this.lang = langcode;
 
-      <!-- Texto secundario -->
+    this.$router.replace(`/${langcode}`);
-      <p class="mt-6 text-base text-gray-700">
+  },
-        Síguenos en
+};
-        <a
+</script>
-          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>

plugins/vuex.client.js

@@ -0,0 +1,5 @@
+import { kitecosocialStore } from '~/store/index';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(kitecosocialStore);
+});

store/index.js

@@ -0,0 +1,8 @@
+import { createStore } from 'vuex';
+import { langcodeModule } from './langcode';
+
+export const kitecosocialStore = createStore({
+  modules: {
+    langcode: langcodeModule,
+  },
+});

store/langcode.js

@@ -0,0 +1,18 @@
+export const langcodeModule = {
+  state: () => ({ 
+    langcode: 'es'
+  }),
+  mutations: {
+    SET_LANGCODE: (state, langcode) => {
+      state.langcode = langcode;
+    }
+  },
+  actions: {
+    setLangcode: ({ commit }, langcode) => {
+      commit("SET_LANGCODE", langcode);
+    }
+  },
+  getters: {
+    langcode: (state) => state.langcode
+  },
+};