Vue 3's v-on syntax does not support listening to custom events with capital letters

[rictic]

Version

3.2.30

Reproduction link

sfc.vuejs.org/

Steps to reproduce

Notice that the event named 'lower' is being handled by the Vue component, but the event named 'Upper' is not

What is expected?

Event names are an open set, and can include capital letters

What is actually happening?

The event named with a capital letter is not handled

---

This issue seems to also occur with capital letters in other parts of the event name too

I am a rank Vue novice, and so I may be making a simple error or oversight.

This came up when updating the web site custom-elements-everywhere.com which tracks library and framework support for custom elements. See webcomponents/custom-elements-everywhere#1388

[lidlanca]

 <fires-events @Upper=inc1 @lower=inc2>

compiles to indistinguishable prop name
onUpper
onLower

this is unlikely to change.

to work around this limitation, either use a directive or a template ref to add an event listener directly to the dom element.

[3zzy]

@LinusBorg If that's the case then the Vue doesn't get a perfect 100% as mentioned in the docs so the docs need to be updated to reflect that.

[LinusBorg]

Sure, PRs are welcome.

However, consider that we don't prevent you from listening to this event - you can add the event listener with a small custom directive, as mentioned - it's just not supported via v-on as it collides with Vue's own event name semantics.

[rictic]

Sent over a docs PR, but if there's an ergonomic to support arbitrary event names, we could instead update the custom-elements-everywhere test for this feature: https://github.com/webcomponents/custom-elements-everywhere/blob/221ea4744373f34112331949c0d85d4b45e41d69/libraries/vue/src/components.js#L157-L163

[LinusBorg]

@rictic thanks!

So here's the recommendation:

In Vue, one can define custom directives (like that internal ones, i.e. v-on) to wrap imperative DOM operations in a declarative way. These custom directives can be declared locally in each component or registered globally in an app to be available in all child components.

What we would want here is a basic way to add and remove event listeners while preserving the event name casing at all times. This can be achieved with a few lines of code. here's a demo with local registration: SFC Playground

Registering this directive globally (in one app's context) would look like this:

// v-event:arg"value"
app.directive('event', {
    beforeMount(el, { arg, value }) {
      el.addEventListener(arg, value)
    },
    beforeUnmount(el, { arg, value }) {
      el.removeEventListener(arg, value)
    }
  })

Would that be simple enough to be considered as a declarative solution for these tests?

[rictic]

That works well.

Given its small size, what do you think about adding the event directive into Vue by default, just so that it's a pattern that components can rely on existing, and that is more likely to be findable?