How to define multiple apps with Alpine.data in different <script> blog

[hongquan]

I want to have page where I have mutiple AlpineJS mini app, defined with Alpine.data in separate <script>.
The reason of this separation is that, the page is rendered server-side, by Jinja2 template for particular.
The backend provide a "shortcode" (implemented in Jinja2) leadform to included multiple forms to the page. The page template will then be like this:

<div>
  {{ leadform(label='Form 1') }}
</div>
...
<div>
  {{ leadform(label='Form 2') }}
</div>

The shortcode, when rendered, will be a block of HTML of a form with its handle code in AlpineJS.

So, how should I implement the AlpineJS so that they don't conflict, and inspectable in devtools? I prefer the implementation in <script type='module'>, because I am using with a lib that only supports ESM.

[ekwoka]

You can do that.

not clear exactly how your files are implemented, but you could have each do something like

<script type="module">
   import Alpine from 'alpinejs' // either put the url to your module script of alpine js or use an import map to sue the short name
   Alpine.data('blah', () => ({})
 </script>

then at the end of the document put

<script type="module">
 import Alpine from 'alpinejs'
 Alpine.start()
</script>

Or use inline in the x-data
or bundle all the components before render.

[hongquan]

Thanks