Remove vue-router support from Menu components

[tugcekucukoglu]

• Breadcrumb
• ContextMenu
• Dock
• Menu
• Menubar
• MegaMenu
• PanelMenu
• Steps
• TabMenu
• TieredMenu

[Payn]

Hello @tugcekucukoglu
how to use routing with TabMenu now? Or any other way to display different views based on active tab?
Thanks

[DotoPototo]

@Payn You can do something like this:

<template>
  <TabMenu :model="menuItems" :active-index="activeMenuItemIndex">
    <template #item="{ item, props }">
      <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
        <a :href="href" v-bind="props.action" @click="navigate">
          <span :class="item.icon" />
          <span class="ml-2">{{ item.label }}</span>
        </a>
      </router-link>
    </template>
  </TabMenu>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const activeMenuItemIndex = ref(0);

const menuItems = [
  { label: 'MyTabOne', icon: 'pi pi-fw pi-code', route: '/tabone' },
  { label: 'MyTabTwo', icon: 'pi pi-fw pi-book', route: '/tabtwo' },
  { label: 'MyTabThree', icon: 'pi pi-fw pi-id-card', route: '/tabthree' },
];

watch(
  () => route.path,
  (updatedPath) => {
    activeMenuItemIndex.value = menuItems.findIndex((item) => updatedPath.startsWith(item.route));
  },
  { immediate: true }
);
</script>

The watch is similar to vue-routers active class. You could do something like

activeMenuItemIndex.value = menuItems.findIndex((item) => item.route === updatedPath );

for the exact active class.

[Payn]

Awesome, this works. Thank you.

[Yonaro]

Any reason on why this has been removed?

[vinodkola1337]

Any reason on why this has been removed?

You can find the explanation here.

[erropix]

@tugcekucukoglu This is a breaking change and yet not mentioned in the 3.40 changelog?

[sey]

We just discovered about this change. I think it is a big issue to use semantic versioning and introduce a breaking change in minor version bump.