How to listen to events in Vue 3?

[shadow-light]

I can't figure out how to listen to material component custom events in Vue 3.

The following doesn't work:

<mwc-drawer ref='drawer' @MDCDrawer:opened='opened'>

Where as this does:

onMounted(() => {
    drawer.value.addEventListener('MDCDrawer:opened', () => {
        console.log('opened')
    })
})

Is this an issue with Vue 3 or am I not using the material custom elements correctly?

[Matix-Media]

It's probably having to do with the :. I do not know if there is a way to escape an event name in Vue. Maybe you could ask on their GitHub or discord community.

[pgbross]

Vue 3 cannot listen for mixed case native events (Vue 3 issue #2460).

The response to the issue when it was raised, was that Vue core lowercases event names because for normal events they have to lowercase the first character 'onClick' -> 'click'.

[asyncLiz]

Shouldn't be an issue in M3 anymore since we don't use : in our event names