I work on a traditional Multi Page App and Vue 3 widgets. I want to use Vue 3 with build (Vite) and Single File Components. What I'd like to achieve is passing a variable from HTML (generated by backend) to the component. It works with a version from CDN, but I cannot see a right way of doing it when using a build (vite, webpack).
Option A. I could use multiple Vue instances - an instance for every single widget. However I cannot see a way passing a variable as a property like that:
<div id="my_app" my-entry-property="variable_from_backend"></div>
Option B (it works without build and would be even better) I could use Vue-components in HTML just like that:
<div id="my_app">
<h1>just a html from backend</h1>
<my-awesome-vue-component my-entry-property="variable_from_backend"></my-awesome-vue-component>
</div>
As I know both options are not possible. Please tell me that I am wrong. If there is another way to achieve it (with assumption SFC and build) it would be also great.