I have created a Lit component in typescript. It is being exported as a named export. I am not able to register it in Vue 2 class component. Here are the issues I am facing:
Issue 1:
import { MyElement } from 'vite-project';
@Component({
components: {
MyElement
},
This gives below runtime error
vue.runtime.esm.js:4020 TypeError: Cannot call a class as a function
at _classCallCheck (classCallCheck.js:3:1)
at M (my-element.ts:18:1)
at resolveAsyncComponent (vue.runtime.esm.js:2722:1)
at createComponent (vue.runtime.esm.js:2142:1)
at _createElement (vue.runtime.esm.js:2319:1)
at createElement$1 (vue.runtime.esm.js:2269:1)
at vm._c (vue.runtime.esm.js:2561:1)
at Proxy.render (Console.vue:23:1)
at Vue._render (vue.runtime.esm.js:2610:1)
at VueComponent.updateComponent (vue.runtime.esm.js:3045:1)
Issue 2:
The component gets registered and works well if I import it as default export like
import MyElement from 'vite-project';
But this gives compile time warning that
"export 'default' (imported as 'MyElement') was not found in 'vite-project/dist/my-element'
Above warning is correct since I am not exporting MyElement as a default export.
I also tried exporting MyElement as default but again it gives the same runtime error.
Please help.
Web Component Code:
import { html, css, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
@customElement('my-element')
export default class MyElement extends LitElement {
static styles = css`
:host {
display: block;
padding: 25px;
}
`;
@property({ type: String }) header = 'Hey there';
@property({ type: Number }) counter = 5;
__increment() {
this.counter += 1;
}
handle(e: any) {
console.log(e)
}
render() {
return html`
<h2>${this.header} Nr. ${this.counter}!</h2>
<button @click=${this.__increment}>increment</button>
`;
}
}
I should be able to register the component in Vue 2 class component