[Vuejs]-Lit componen event dispact in vue not working

by

0👍

✅

Avoiding Verb Prefixes in Event Names: It’s recommended not to use verb prefixes like "on" in event names for custom events. Most modern frameworks handle event binding implicitly, so you don’t need to explicitly use "on" when defining event handlers. For example, in Angular, you can simply use (close)="handle(), and in Preact, you can use onClose={this.handle}

Vue Declarative Event Bindings: Vue allows you to listen to native DOM events dispatched from Custom Elements. However, when using declarative event bindings, Vue only supports lowercase and kebab case event names. If you want to listen for events with different cases, you’ll need to write imperative code.

Rename onClickRippleButton to clickRippleButton something like and try

handleClick(event: Event): void {
    console.log("handleClick from lit is running");

    let customEvent = new CustomEvent("clickRippleButton", {
      bubbles: true,
      composed: true,
      detail: { value: "hello response from lit" },
    });
    this.dispatchEvent(customEvent);
  }

References

Reusable UI Component API Guide

Custom Elements Everywhere

Leave a comment