integración dinamica componentes y json con idioma

components/HeroHome.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>{{ title }}</h1>
+    <h2>{{ subtitle }}</h2>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      title: {
+        type: String,
+        default: '',
+      },
+      subtitle: {
+        type: String,
+        default: '',
+      },
+    },
+  }
+</script>

data/cat/index.json

@@ -1,4 +1,9 @@
+[
   {
-  "title": "Benvingut",
-  "body": "Aquest és el contingut en català."
+    "component": "HeroHome",
+    "props": {
+      "title": "Benvingut al Kit",
+      "subtitle": "Tot per a l'economia social"
     }
+  }
+]

data/es/index.json

@@ -1,4 +1,9 @@
+[
   {
-  "title": "Bienvenido",
-  "body": "Este es el contenido en español."
+    "component": "HeroHome",
+    "props": {
+      "title": "Bienvenido al Kit",
+      "subtitle": "Todo para la economía social"
     }
+  }
+]

pages/[langcode]/index.vue

@@ -1,24 +1,29 @@
 <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>
+  <main v-if="landingComponents" class="min-h-screen relative">
+    <template v-for="(component, index) in landingComponents" :key="`component-${component.component}-${index}`">
+      <component 
+        :is="component.component" 
+        v-if="component" 
+        v-bind="component.props" />
+    </template>
+    <!-- <div class="fixed bottom-0 right-0 z-50 p-2">
+      <ButtonCTA @click="changeLang" >
+        Cambiar Idioma
+      </ButtonCTA>
+    </div> -->
+  </main>
 </template>
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import HeroHome from '~/components/HeroHome.vue';
 export default {
+  components: {
+    HeroHome,
+  },
   data() {
     return {
-      content: {},
+      landingComponents: []
     };
   },
   computed: {
@@ -28,26 +33,26 @@ export default {
     const langcode = this.$route.params.langcode;
     try {
       const res = await import(`~/data/${langcode}/index.json`);
-      this.content = res.default;
+      this.landingComponents = res.default;
     } catch (err) {
       console.error('Error al cargar contenido:', err);
-      this.content = {
-        title: 'Contenido no disponible',
-        body: 'No se pudo cargar el contenido.',
-      };
+      this.landingComponents = [
+        {
+          component: 'ErrorComponent',
+          props: {
+            message: 'Contenido no disponible',
+          },
+        },
+      ];
     }
   },
   methods: {
     ...mapActions(['setLangcode']),
-    cambiarIdioma() {
-      const nuevoIdioma = this.langcode === 'es' ? 'cat' : 'es';
-      this.setLangcode(nuevoIdioma);
-      this.$router.push({ path: `/${nuevoIdioma}` });
-    }
+    // changeLang() {
+    //   const newLang = this.langcode === 'es' ? 'cat' : 'es';
+    //   this.setLangcode(newLang);
+    //   this.$router.push({ path: `/${newLang}` });
+    // }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-
-</style>