Using a widget bundle repeatedly in a page

Hello, new Vue user here learning the ropes. We have an existing widget that I’m porting to Vue. The widget is a button that pops up a modal. This button may appear multiple times on a page, so must be efficiently reusable.

I went down the path of web-component-wrapper to create a custom component that may be declared in HTML (e.g. <my-component></my-component>). I got that working only to discover that CSS modules don’t work in custom shadow DOM components. The work-around currently doesn’t work for Safari, which puts a nail in the coffin for that option.

Is there a good way to load the bundle with a script tag and have it render at that location? For example:

<div>
  <script src="myWidget.js" option1="123" option2="abc"/>
</div>

<div>
  <script src="myWidget.js" option1="456" option2="xyz"/>
</div>

Found a workable solution. The script is loaded once as scripts typically are (instead of multiple times in the example above). In main.js, the Vue app is created with no mount call.

new Vue(app);

app.vue has no template, instead creating widgets for every matching element.

<!-- Dynamically create widget buttons -->

<script>
import Vue from 'vue';
import widget from './widget.vue';

let vue = new Vue({
  el: ".my-widget", // mount app in any widget element
  mounted: () => {
    let widgetContainers = document.querySelectorAll(".my-widget");

    for (let container of widgetContainers) {
      let ComponentClass = Vue.extend(widget);
      let _widget = new ComponentClass({
        propsData: {
          params: {...container.dataset},
        }
      });
      _widget.$mount(container);
    }
  }
});

export default vue
</script>

Note how the data-* attributes are passed to the widget.