Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

221
Views
¿Cómo devolver un componente/etiqueta de componente dinámicamente en vue/nuxt?

Estoy intentando convertir una aplicación next.js ( https://medium.com/strapi/how-to-create-pages-on-the-fly-with-dynamic-zone-8eebe64a2e1 ) en una aplicación nuxt.js. En esta aplicación puedo obtener datos de una API y la aplicación next.js usa los datos de las API para generar nuevas páginas con su contenido correspondiente. Funciona bien en Next.js.

Los datos/contenido de la API consisten en datos de SEO para la página, algunos valores estáticos y bloques muy importantes. Estos bloques tienen un atributo llamado __component donde se guarda el nombre de los componentes y también tienen los datos de los componentes como imágenes, texto, etc. Así que solo tengo que lidiar con next.js cuando agrego nuevos componentes.

En next.js usé catch-all-route ./pages/[[...slug]] .js para capturar cualquier slug que un usuario pueda ingresar. Luego, la API se activa con el slug de context.query y obtengo los datos de las páginas, si existen. Ahora los datos json de las API solo deben pasarse al componente blockmanager.

 const Universals = ({blocks}) => { return <div><BlockManager blocks={blocks}></BlockManager></div>; };

Aquí, el administrador de bloques obtiene la lista json de bloques, a partir de la cual analizar los componentes.

 import Hero from '../../blocks/Hero'; import Pricing from '../../blocks/Pricing'; const getBlockComponent = ({__component, ...rest}, index) => { let Block; switch (__component) { case 'blocks.hero': Block = Hero; break; case "blocks.prices": Block = Pricing; break; } return Block ? <Block key={`index-${index}`} {...rest}/> : null; }; const BlockManager = ({ blocks }) => { return <div> {blocks.map(getBlockComponent)} </div>; }; BlockManager.defaultProps = { blocks: [], }; export default BlockManager;

¿Cómo puedo replicar esta línea ahora en nuxt js?

 return Block ? <Block key={`index-${index}`} {...rest}/> : null;

¿Cómo devolver un componente/etiqueta de componente dinámicamente en vue/nuxt? ¿Existe tal vez otra solución para insertar automáticamente el componente deseado? Tal vez alguien sepa cómo convertir la lógica de los administradores de bloques a la lógica vue/nuxt por completo.

about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

Creo que estás buscando el atributo is . Puedes leer sobre esto aquí .

Su plantilla se vería así:

 <component :is="__component" key={`index-${index}`} />
about 4 years ago · Juan Pablo Isaza Report

0

Bien, creo que lo tengo. No hay cosas extrañas en realidad. Lo pensé demasiado complicado. Quería todo creado dinámicamente pero no es necesario como vi más tarde ...

 <template v-if="blocks"> <div id="example-1"> <div v-for="({__component, ...rest}=block, i) in blocks" :key="i"> <Hero :data="rest" v-if="__component === 'blocks.hero'"/> <Pricing :data="rest" v-if="__component === 'blocks.pricing'"/> </div> </div> </template> <script> import Hero from '../../blocks/Hero/Hero.vue'; import Pricing from '../../blocks/Pricing/Pricing.vue'; export default { components: { Hero, Pricing }, props: { blocks: Array } } </script>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!