lit componen event dispact in vue not working

Question

am trying to made web component with Lit, so that component can be consume on vanila js, react, angular and vue So I created component with Lit like code below

    import { html, LitElement } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("button-ripple")
export class ButtonRipple extends LitElement {
  handleClick(event: Event): void {
    console.log("handleClick from lit is running");

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

  render() {
    return html`
      <button @click=${this.handleClick}>
        <slot></slot>
        )}
      </button>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    "button-ripple": ButtonRipple;
  }
}

I tried to run in vanilajs, angular, react with their own way, and it running well as expected but not in vue

here my vue code

<script>
import 'component_from_lit_is_importedhere;
export default {
  data() {
    return {
      btnName:'Cekidot gan'
    };
  },
  methods: {

    onHanleClick(e){
      console.log("onHanleClick = ", e)
    }
  }
}
</script>

<template>
  <button-ripple @onClickRippleButton="onHandleClick($event)">{{btnName}}</button-ripple>
</template>

when I try put props "onClickRippleButton" it run console.log that I have set in lit element

but function "onHandleClick" in vue not running at all, and cannot receive argument that I've from Lit Component

is there any way in vue to get parameter that I set in Lit element?

Answer 1

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