Custom Events with uppercase characters no longer work in Vue

[alexanderbenavides]

I created an input in stenciljs and I have register a valueChanged event in there. Then I want to use the input in vue with the v-model directive. But the the event @valueChanged does not work in vue 3, but it does in vue 2.

Vue 3:

vue 2:

My code in vue2 and vue3 are the same:

<template>
    <cb-input label="Name: " @valueChanged="onValueChanged"></cb-input>
</template>

<script>

export default {
  name: 'App',
  components: {},
  methods: {
    onValueChanged(evt) {
      console.log(evt);
    }
  }
}
</script>

[claviska]

This happens because of a change in the way Vue 3 uses in-DOM templates. While this did work in Vue 2, even then they recommended using kebab-cased event names. From this page:

This rule aims to warn the custom event names other than the configured casing.

Vue 2 recommends using kebab-case for custom event names.

Event names will never be used as variable or property names in JavaScript, so there’s no reason to use camelCase or PascalCase. Additionally, v-on event listeners inside DOM templates will be automatically transformed to lowercase (due to HTML’s case-insensitivity), so v-on:myEvent would become v-on:myevent – making myEvent impossible to listen to.

For these reasons, we recommend you always use kebab-case for event names.

Unfortunately this isn't something Stencil can fix, and it was such a pain that it caused me to rework custom event names in Shoelace. 😓

FWIW, this isn't specific to Vue. Any library that uses declarative binding with in-DOM templates will run into the same problem.

Since converting all events to lowercase may not be feasible, there's an undocumented feature that Ionic uses to translate custom event names on the fly in the defineCustomElements() function.

await defineCustomElements(window, {
  ce: (eventName: string, opts: any) => new CustomEvent(eventName.toLowerCase(), opts)
} as any);

I hope that helps!

[jackchoumine]

I created an input in stenciljs and I have register a valueChanged event in there. Then I want to use the input in vue with the v-model directive. But the the event @valueChanged does not work in vue 3, but it does in vue 2.

Vue 3:

vue 2:

My code in vue2 and vue3 are the same:

<template>
    <cb-input label="Name: " @valueChanged="onValueChanged"></cb-input>
</template>

<script>

export default {
  name: 'App',
  components: {},
  methods: {
    onValueChanged(evt) {
      console.log(evt);
    }
  }
}
</script>

same issue: stencil components events not working in Vue 3

[dmartinjs]

a small "fix" when waiting a fix from Vue 3

// Apply polyfills and declare components
applyPolyfills().then(() => {
  defineCustomElements(window, {
    ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(eventName.toLowerCase(), cb, opts),
    rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(eventName.toLowerCase(), cb, opts),
    ce: (eventName: string, opts: any) => new CustomEvent(eventName.toLowerCase(), opts)
  } as any);
});

this will lowercase all your events,
it will work for directives (@listen and @event ) but will not modify manual addEventListener be aware of that.

Since this problem is for all web components and not only Stencil, I don't think the Stencil team can do something about it.

this issue is referenced in the Vue repo (vuejs/core#2460).

[zh3ngyuan]

a small "fix" when waiting a fix from Vue 3

// Apply polyfills and declare components
applyPolyfills().then(() => {
  defineCustomElements(window, {
    ael: (el: any, eventName: string, cb: any, opts: any) => el.addEventListener(eventName.toLowerCase(), cb, opts),
    rel: (el: any, eventName: string, cb: any, opts: any) => el.removeEventListener(eventName.toLowerCase(), cb, opts),
    ce: (eventName: string, opts: any) => new CustomEvent(eventName.toLowerCase(), opts)
  } as any);
});

this will lowercase all your events, it will work for directives (@listen and @event ) but will not modify manual addEventListener be aware of that.

Since this problem is for all web components and not only Stencil, I don't think the Stencil team can do something about it.

this issue is referenced in the Vue repo (vuejs/core#2460).

I am using @stencil/core@2.14.0 seems like there is no property ce defined in CustomElementsDefineOptions in this version, I was wondering if there is any workaround for it?

Update: seems like the CustomElementsDefineOptions defined in loader/index.d.ts doesn't not include this property but we can still use it

[bjankord]

Just ran into this issue. Going to be updating all of our custom events from camelCase to kebab-case so they work with Vue 3. I think it would be good to update Stencil's event docs to use kebab-case as well:
https://stenciljs.com/docs/events

[jeco123]

Have you tested the v-model feature with this "hack" ? on my side, nothing happens with the v model directive

[tanner-reits]

Hey all 👋

Based on the conversation, it sounds like this evolved into more of a support request/topic as it falls outside Stencil's scope. As such, I'm going to get this labeled and closed out appropriately. Hopefully everyone was able to work around the issue within Vue!

[ionitron-bot]

Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for bug reports and feature requests. Please use our slack channel for questions about Stencil.

Thank you for using Stencil!