I"m a (very) recent user of PrimeVue ... We've started developing a new app, using Vue 3 and PrimeVue, at this point in time, seems the only mature library that supports it.
Now, with Vue3 came the Composition API and the documentation shows some component examples using that. However, for the Menu components that is not the case. When I implement the Menubar using the Options API, it works exactly as intended (and like the example as shown in https://primefaces.org/primevue/showcase/#/menubar ) ...
However when I try the same using the Composition API, only the top level menu item (users in the attached example) shows, and no submenu dropdown is shown.
Is this still work in progress ? A bug maybe ? or am I missing something here ?
Again, this works perfectly fine using the Options API.
An example in the documentation of how to make this work with the Composition API would be greatly appreciated.
Code: Select all
<template>
<MenuBar :model="items">
<template #start>
<img
alt="logo"
src="../../assets/images/logo.svg"
height="40"
class="p-mr-2"
/>
</template>
<template #end>
<Button
label="Logout"
icon="pi pi-power-off"
:style="{ 'margin-left': '0 .5em' }"
/>
</template>
</MenuBar>
</template>
<script>
import MenuBar from 'primevue/menubar';
export default {
components: {MenuBar},
setup() {
const items = [
{
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [
{
label: 'New',
icon: 'pi pi-fw pi-user-plus'
},
{
label: 'Delete',
icon: 'pi pi-fw pi-user-minus'
},
{
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon: 'pi pi-fw pi-print'
}
]
},
{
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
]
return { items }
}
}
</script>