Vue 3.3.5 - Menubar - Composition API bug ?

UI Components for Vue
Post Reply
Hansz
Posts: 1
Joined: 11 Mar 2021, 00:10

11 Mar 2021, 00:47

Hi people,

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>

tugce.kucukoglu
Posts: 78
Joined: 23 Oct 2020, 09:28

15 Apr 2021, 14:42

Hi,

PrimeVue showcase updated with CodeSandbox example. So you can find examples with Options API and Composition API. This is the Menubar Composition API example https://codesandbox.io/s/2uwru

Best Regards,

Post Reply

Return to “PrimeVue”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests