I have a simple Vue JS project aimed to apply the micro front-end concept. In this context, the project is composed of one parent app (wrapper) and two children's apps, both made in Vue JS. The children's apps are injected by script tag inside its parent - the bundles are stored inside an S3 bucket. I am not using any framework to achieve that, just vanilla JS concepts.

So, it Something like this:

// 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>

And finally, inside the parent app template, I have a suitable container for each app where they will be rendered:

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

At this point, everything works fine. My question is, how could I send some props to the children's apps? Would it be possible? I have tried some alternatives, but all of them have failed. I would like to do something as follows:

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

A final thought: As the script tag content is loaded asynchronously, I believe that before passing any prop to the child app, it's necessary to ensure that its content (bundle.js from AWS S3) is in fact loaded.

Thank you all.