Several accordion examples result in error on Vue 3

[QuixoticGitHub]

I read that this UI framework was supposed to work for Vue 3, but that doesn't really seem to be the case yet? Or maybe it does and the documentation is simply lacking?

`
<template #item-title.1>Item title 1
<template #item-content.1>Item content 1

<template #item-title.2>Item title 2
<template #item-content.2>Item content 2

<template #item-title.3>Item title 3
<template #item-content.3>Item content 3
`

The "Do you (really) need even more flexibility?" (I do) example results in repeated:

'v-slot' directive doesn't support any modifier vue/valid-v-slot

errors.

I would've gone and asked in some Telegram/Discord channel, but you seemingly don't have any?

[antoniandre]

I read that this UI framework was supposed to work for Vue 3, but that doesn't really seem to be the case yet? Or maybe it does and the documentation is simply lacking?

This is not a friendly way to ask for some help.
Everything is working fine on Vue 3 unless you find an issue I haven't seen.

Your problem seems to come from Eslint, here is the same filed error with Vuetify: https://stackoverflow.com/questions/61344980/v-slot-directive-doesnt-support-any-modifier

If you have some doubts you can always fork and run the Wave UI project on the next branch (which is on Vue 3).
If you find something not working there (except for whitespaces vuejs/core#1600) it's probably an issue. ;)

Please reopen if not solved.

[QuixoticGitHub]

Hi again, sorry if I sounded harsh... was not trying to be snarky. I am trying out Wave-UI for the first time.

rewriting

`
<template #item-title.1>Item title 1
<template #item-content.1>Item content 1

<template #item-title.2>Item title 2
<template #item-content.2>Item content 2

<template #item-title.3>Item title 3
<template #item-content.3>Item content 3
`

to

`

<template #[`item.title.1`]>Item title 1</template>
<template #[`item-content.1`]>Item content 1</template>

<template #[`item-title.2`]>Item title 2</template>
<template #[`item-content.2`]>Item content 2</template>

<template #[`item-title.3`]>Item title 3</template>
<template #[`item-content.3`]>Item content 3</template>

`

addresses the issue, but for whatever reason, the 'Item title 1' doesn't show up on the first item.

I just figured I'd let you know... maybe this leads to helping others. Should the current documentation be updated?

[antoniandre]

Thanks for your feedback @QuixoticGitHub, it looks like there is a typo here <template #["item.title.1"]> where it should be <template #["item-title.1"]>.
Hope it helps!