Not able to register Lit component in Vue 2 class components

143 Views Asked by At

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

0

There are 0 best solutions below