Component events are transformed to camelCase

[biesbjerg]

Version

3.0.2

Steps to reproduce

It is recommended to emit kebab-case events from components (per v3 docs and eslint vue/custom-event-name-casing rule).

The component:

export default defineComponent({
  name: "ResultsBar",
  emits: ["select-result"]
});

This is how it is used in a component:

<ResultsBar @select-result="onSelectResult($event)" />

It seems event names are transformed to camelCase before reaching the component, resulting in an error:

Extraneous non-emits event listeners (selectResult) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

What is expected?

Event name should be kept as is camelCase

What is actually happening?

Event name is transformed to camelCase

[posva]

Duplicate of #2540

---

Please, search existing issues and pull requests before opening issues, it saves maintainers a lot of time 🙏