Is there a way to use with Vue runtime?

[victorhramos]

How to use it with vue runtime direct from browser?

[victorhramos]

Trying to get it wroking:

<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.4.1/document-register-element.js"></script>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vueinbrowserloader/VueInBrowserLoader.js"></script>
<script src="./node_modules/vue-web-component/global.js"></script>

<div id="cartao">
    {{msg}}

    <foo-element></foo-element>
</div>

<script>
    const Widget = VueInBrowserLoader('./Widget.vue');
    customElements.define('foo-element', vueWebComponent(Widget));

    const app = new Vue({
        el: '#cartao',
        components: {
            Widget
        },
        data: {
            msg: 'teste'
        }
    });
</script>

Receiving at console: Uncaught TypeError: vueWebComponent is not a function

[trusktr]

Hi @victorhramos, it's not so clean, but the export is stored on the default property. Does the following work for you?

    const VueWebComponent = vueWebComponent.default
    customElements.define('foo-element', VueWebComponent(Widget));