Tengo un proyecto simple de Vue JS destinado a aplicar el concepto de micro front-end. En este contexto, el proyecto se compone de una aplicación principal (envoltura) y dos aplicaciones para niños, ambas realizadas en Vue JS. Las aplicaciones de los niños se inyectan mediante una etiqueta de secuencia de comandos dentro de su principal: los paquetes se almacenan dentro de un depósito S3. No estoy usando ningún marco para lograr eso, solo conceptos básicos de JS.

Entonces, es algo como esto:

 // Parent app - micro front injection (script tags are injected inside document.body) <script src="micro-front-1-url"></script> <script src="micro-front21-url"></script>

Y finalmente, dentro de la plantilla de la aplicación principal, tengo un contenedor adecuado para cada aplicación donde se representarán:

 // Parent app - template area <template> <div> <div id="micro-front-1"></div> <div id="micro-front-2"></div> </div> </template>

En este punto, todo funciona bien. Mi pregunta es, ¿cómo podría enviar algunos accesorios a las aplicaciones para niños? ¿Seria posible? He probado algunas alternativas, pero todas han fallado. Me gustaría hacer algo de la siguiente manera:

 // Parent app - template area <template> <div> <div id="micro-front-1" :someProp="someValue"></div> <div id="micro-front-2" :someProp="someValue"></div> </div> </template>

Una reflexión final: como el contenido de la etiqueta del script se carga de forma asíncrona, creo que antes de pasar cualquier accesorio a la aplicación secundaria, es necesario asegurarse de que su contenido (bundle.js de AWS S3) esté realmente cargado.

Gracias a todos.