Issue with typescript

[vladra]

Hi :v:

When trying to use vue-custom-element I'm encountering this is undefined error. Project is built with vue-cli 3, no config was changed.

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

import App from './App.vue';

Vue.use(VueCustomElement);

Trying to register customElement will result in this is undefined error:

Vue.customElement('my-widget', App, {});

Mounting Vue as usual gives no error:

new Vue({
  router,
  render: (h) => h(App),
}).$mount('my-widget');

App component definition is empty, with no custom code inside. If I delete script tag from App.vue, component renders okay.

Stacktrace lead here:

Not sure if this is vue-custome-element related issues.. Any ideas? Thanks!

[karol-f]

Can you check https://github.com/karol-f/vue-custom-element/issues/98#issuecomment-379756322 or https://github.com/karol-f/vue-custom-element/issues/143#issuecomment-418523708?

Regards!

[vladra]

Thanks for you reply. Unfortunately I wasn't able to fix this.

Trying to pass Vue.customElement('my-widget', new App()) returns an error Failed to mount component: template or render function not defined.. I've tried to use render function, but this error still present. Maybe I'm doing it wrong though..

export default Vue.extend({
  render(h): VNode {
    return h('div', 'hello');
  }
});

I've already checked example with Typescript withing second link, and looks like it doesnt work also if I remove new Vue mount part from the code (didn't check why though).

I've created repo with described case. Its created with vue-cli 3, and then I just added vue-custom-element plugin and its related config. It has exactly described error. To try simply clone it and run yarn serve

https://github.com/vladra/vue-custom-element-issue

[karol-f]

@vladra Hi, after checking it's working like that:

const app = new App();
Vue.customElement('my-widget', app.$options);

Unfortunately vue-class-component is changing the component object and this is the way to use it with vue-custom-element.

Regards.