Search code examples
javascriptangularvue.jsweb-component

How to create Web-component in Vue+typescript for Angular?

I use vue-custom-element to create Web-component in Vue and use it in Angular. It works fine for Vue+js:

import Vue from 'vue'
import Calculator from './components/Calculator.vue'

import vueCustomElement from 'vue-custom-element'

Vue.use(vueCustomElement)
Vue.customElement('js-calculator', Calculator)

and I use in Angular at index.html:

<body>
  <app-root></app-root>
  <js-calculator msg="30"></js-calculator>
</body>

It works fine. But when I use typescript and vue-class-component in Vue (instead of javascript) and the same code, I don't see web-component in Angular. Vue+ts calculator works in a separate app too. What could be the problem?

Solution

  • The correct answer:

    On typescript instead of

    Vue.customElement('ts-calculator', Calculator)

    we should use

    Vue.customElement('ts-calculator', (Calculator as any).options)

    or

    Vue.customElement('ts-calculator', new Calculator().$options)