karol-f / vue-custom-element

Vue Custom Element - Web Components' Custom Elements for Vue.js
https://karol-f.github.io/vue-custom-element/
MIT License
1.97k stars 187 forks source link

Issue with build by vue-cli lib target #237

Closed aryaroudi closed 3 years ago

aryaroudi commented 3 years ago

I have a Vue project with different kinds of build and I want to export one of my components as Webcomponent.

so I made a build.ts file for test:

import vueCustomElement from 'vue-custom-element';
import Vue from 'vue';

Vue.use(vueCustomElement);

Vue.customElement('widget-vue', {
    props: ['prop1', 'prop2', 'prop3'],
    data: () => {
        return {
            message: 'Hello Vue!',
        };
    },
    template: '<p>{{ message }}, {{ prop1  }}, {{prop2}}, {{prop3}}</p>',
});

and run the: vue-cli-service build --target lib src/components/FullCalendar/build.ts

the result is this: image

now in demo.html if I add something like:

<script src="./po-enterprise-common.umd.js"></script>

<widget-vue prop1="1" prop2="string" prop3="true"></widget-vue>

I get an error: Uncaught TypeError: Cannot read property 'use' of undefined

but if I include VUE <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> It will start working.

So basically the webcomponent still will have a dependency to vue? I thought it is an individual webcomponent without any need to VUE. This can cause a problem in other frameworks and It hasn't been mentioned in Documentation for example I need to load VUe in a angular project in order to render this custom element?

karol-f commented 3 years ago

It is WebComponent on the outside, but inside it there is Vue component (I tried to explain it in docs/readme). It's not possible to easily convert all Vue specific behaviour to plain JS (I don't see any point in it).