search

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

Use vue-custom-element with vue-class-component and Typescript for Angular #258

Closed KirillRadchenko closed 3 years ago

KirillRadchenko commented 3 years ago

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?

karol-f commented 3 years ago

Hi, please try

import Test from "./components/Test.vue";

Vue.customElement("test-component", Test.prototype.constructor.options);

Regards

KirillRadchenko commented 3 years ago

Hi, many thanks for your answer.

I use typescript v. 4.1.6 and I got: "Property 'options' does not exist on type 'Function'", so I used Vue.customElement("test-component", Test.prototype.constructor.arguments); Is this correct?

But I got the same problem. Web-component was created, but it's still not visible in Angular

karol-f commented 3 years ago

Most likely not. You can also try 

Vue.customElement('my-widget', new Test().$options)

But it's worse option as it double init component.

Best to prepare CodeSandbox example and I will try to check it.

karol-f commented 3 years ago

Or this https://github.com/karol-f/vue-custom-element/issues/173#issuecomment-535417935

I can't check it now

KirillRadchenko commented 3 years ago

It works!

Many thanks for the help. You saved my weekend