Receive Shoelace events in Vue 3

[devmount]

Hi there,

First: Thanks for this awesome component library, I'm really enjoying using it 👏🏻

I have the following question: How can I receive emitted Shoelace events in Vue 3? I just can't get it to work. Here is a minimal code example, when opening a details element, the counter should increment, but it doesnt:

<div id="app">

  <sl-details summary="Opening this should increment the counter" @sl-show="counter++">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </sl-details>

  Shown {{ counter }} times.

</div>

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

const app = Vue.createApp(Counter)
app.config.isCustomElement = tag => tag.startsWith('sl-')
app.mount('#app')

See this fiddle: https://jsfiddle.net/devmount/17n52fxa/

Am I missing something here?

[claviska]

You're doing it right and it works with Vue 3.0.0: https://jsfiddle.net/claviska/euz4pn0m/1/

Your Fiddle is using Vue 3.0.5. Something seems to have broken custom event listeners in Vue 3.0.1 and higher. Perhaps there's an open issue for it on GitHub.

[devmount]

I actually found an open issue on kebab case custom events: vuejs/core#2841
Hope it gets fixed soon.

Thank you!