From 832d7e3dda2af18f6c63d074374616530139e9af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 30 Aug 2023 16:28:00 +0300
Subject: [PATCH 1/7] Refactor #4351

---
 components/lib/breadcrumb/Breadcrumb.d.ts     |  8 ++++++++
 components/lib/breadcrumb/BreadcrumbItem.vue  |  2 +-
 components/lib/contextmenu/ContextMenu.d.ts   |  8 ++++++++
 components/lib/contextmenu/ContextMenuSub.vue |  3 ++-
 components/lib/dock/Dock.d.ts                 |  8 ++++++++
 components/lib/dock/DockSub.vue               |  1 +
 components/lib/megamenu/MegaMenu.d.ts         | 12 ++++++++++++
 components/lib/megamenu/MegaMenuSub.vue       |  2 +-
 components/lib/menu/Menu.d.ts                 |  8 ++++++++
 components/lib/menubar/Menubar.d.ts           | 12 ++++++++++++
 components/lib/menubar/MenubarSub.vue         |  4 ++--
 components/lib/panelmenu/PanelMenu.d.ts       | 12 ++++++++++++
 components/lib/panelmenu/PanelMenuSub.vue     |  2 +-
 components/lib/tieredmenu/TieredMenu.d.ts     | 12 ++++++++++++
 components/lib/tieredmenu/TieredMenuSub.vue   |  3 ++-
 15 files changed, 90 insertions(+), 7 deletions(-)

diff --git a/components/lib/breadcrumb/Breadcrumb.d.ts b/components/lib/breadcrumb/Breadcrumb.d.ts
index d93a6c6b5..ea6db8c49 100755
--- a/components/lib/breadcrumb/Breadcrumb.d.ts
+++ b/components/lib/breadcrumb/Breadcrumb.d.ts
@@ -138,6 +138,14 @@ export interface BreadcrumbSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
     }): VNode[];
     /**
      * Custom separator template.
diff --git a/components/lib/breadcrumb/BreadcrumbItem.vue b/components/lib/breadcrumb/BreadcrumbItem.vue
index e62e1f19e..82d02312c 100755
--- a/components/lib/breadcrumb/BreadcrumbItem.vue
+++ b/components/lib/breadcrumb/BreadcrumbItem.vue
@@ -14,7 +14,7 @@
                 <span v-if="item.label" :class="cx('label')" v-bind="ptm('label', ptmOptions)">{{ label() }}</span>
             </a>
         </template>
-        <component v-else :is="templates.item" :item="item" :label="item.label && label()" :props="getMenuItemProps"></component>
+        <component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>
     </li>
 </template>
 
diff --git a/components/lib/contextmenu/ContextMenu.d.ts b/components/lib/contextmenu/ContextMenu.d.ts
index a85b4f92f..abc6840f6 100755
--- a/components/lib/contextmenu/ContextMenu.d.ts
+++ b/components/lib/contextmenu/ContextMenu.d.ts
@@ -237,6 +237,14 @@ export interface ContextMenuSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
     }): VNode[];
     /**
      * Custom item icon template.
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 3a7e01598..a62a8dbde 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -39,7 +39,7 @@
                                 </template>
                             </a>
                         </template>
-                        <component v-else :is="templates.item" :item="processedItem.item" :label="processedItem.label" :props="getMenuItemProps()"></component>
+                        <component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
                     </div>
                     <ContextMenuSub
                         v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -79,6 +79,7 @@ import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 export default {
     name: 'ContextMenuSub',
diff --git a/components/lib/dock/Dock.d.ts b/components/lib/dock/Dock.d.ts
index e91457f6d..9d80cb1f1 100644
--- a/components/lib/dock/Dock.d.ts
+++ b/components/lib/dock/Dock.d.ts
@@ -210,6 +210,14 @@ export interface DockSlots {
          * Index of the menuitem
          */
         index: number;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
     }): VNode[];
     /**
      * Custom icon content.
diff --git a/components/lib/dock/DockSub.vue b/components/lib/dock/DockSub.vue
index 6e3f3ae92..e0b38ee11 100644
--- a/components/lib/dock/DockSub.vue
+++ b/components/lib/dock/DockSub.vue
@@ -77,6 +77,7 @@ import BaseComponent from 'primevue/basecomponent';
 import Ripple from 'primevue/ripple';
 import Tooltip from 'primevue/tooltip';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 export default {
     name: 'DockSub',
diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
index 02a0f951b..bb945707b 100755
--- a/components/lib/megamenu/MegaMenu.d.ts
+++ b/components/lib/megamenu/MegaMenu.d.ts
@@ -242,6 +242,18 @@ export interface MegaMenuSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
+        /**
+         * Whether or not there is a submenu
+         */
+        hasSubmenu: boolean;
     }): VNode[];
     /**
      * Custom submenu icon template.
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index 05fb56b18..54b0fc0f3 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -39,7 +39,7 @@
                             </template>
                         </a>
                     </template>
-                    <component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="isItemGroup(processedItem)" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
                 </div>
                 <div v-if="isItemVisible(processedItem) && isItemGroup(processedItem)" :class="cx('panel')" v-bind="ptm('panel')">
                     <div :class="cx('grid')" v-bind="ptm('grid')">
diff --git a/components/lib/menu/Menu.d.ts b/components/lib/menu/Menu.d.ts
index 4b15a86c1..b13531941 100755
--- a/components/lib/menu/Menu.d.ts
+++ b/components/lib/menu/Menu.d.ts
@@ -218,6 +218,14 @@ export interface MenuSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
     }): VNode[];
     /**
      * Custom item icon template.
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index 94d81cd9f..061c4f7dd 100755
--- a/components/lib/menubar/Menubar.d.ts
+++ b/components/lib/menubar/Menubar.d.ts
@@ -233,6 +233,18 @@ export interface MenubarSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
+        /**
+         * State of the root
+         */
+        root: boolean;
     }): VNode[];
     /**
      * Custom popup icon template on responsive mode.
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index 220fd1482..292e1738b 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -38,7 +38,7 @@
                             </template>
                         </a>
                     </template>
-                    <component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item" :root="root" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
                 </div>
                 <MenubarSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -191,7 +191,7 @@ export default {
                     },
                     this.getPTOptions(processedItem, index, 'action')
                 ),
-                icons: mergeProps(
+                icon: mergeProps(
                     {
                         class: [this.cx('icon'), this.getItemProp(processedItem, 'icon')]
                     },
diff --git a/components/lib/panelmenu/PanelMenu.d.ts b/components/lib/panelmenu/PanelMenu.d.ts
index 6430da981..69f4d8c5f 100755
--- a/components/lib/panelmenu/PanelMenu.d.ts
+++ b/components/lib/panelmenu/PanelMenu.d.ts
@@ -238,6 +238,18 @@ export interface PanelMenuSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
+        /**
+         * Whether or not there is a submenu
+         */
+        hasSubmenu: boolean;
     }): VNode[];
     /**
      * Custom submenu icon template.
diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
index 057ece7c4..7c389f532 100755
--- a/components/lib/panelmenu/PanelMenuSub.vue
+++ b/components/lib/panelmenu/PanelMenuSub.vue
@@ -35,7 +35,7 @@
                             <span :class="cx('label')" v-bind="getPTOptions('label', processedItem, index)">{{ getItemLabel(processedItem) }}</span>
                         </a>
                     </template>
-                    <component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="isItemGroup(processedItem)" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
                 </div>
                 <transition name="p-toggleable-content" v-bind="ptm('transition')">
                     <div v-show="isItemActive(processedItem)" :class="cx('toggleableContent')" v-bind="ptm('toggleableContent')">
diff --git a/components/lib/tieredmenu/TieredMenu.d.ts b/components/lib/tieredmenu/TieredMenu.d.ts
index acb402bdf..2881e0a3f 100755
--- a/components/lib/tieredmenu/TieredMenu.d.ts
+++ b/components/lib/tieredmenu/TieredMenu.d.ts
@@ -236,6 +236,18 @@ export interface TieredMenuSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
+        /**
+         * Whether or not there is a submenu
+         */
+        hasSubmenu: boolean;
     }): VNode[];
     /**
      * Custom submenu icon template.
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index ae08ecbb9..106d08d1b 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -38,7 +38,7 @@
                             </template>
                         </a>
                     </template>
-                    <component v-else :is="templates.item" :item="processedItem.item" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item" :hasSubmenu="getItemProp(processedItem, 'items')" :label="getItemLabel(processedItem)" :props="getMenuItemProps(processedItem, index)"></component>
                 </div>
                 <TieredMenuSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -75,6 +75,7 @@ import BaseComponent from 'primevue/basecomponent';
 import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
 
 export default {
     name: 'TieredMenuSub',

From 9de8ecf838baa2ea20a0beae8d01de5c93158063 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Wed, 30 Aug 2023 13:28:51 +0000
Subject: [PATCH 2/7] Update API doc

---
 doc/common/apidoc/index.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 353813aae..7f90b572b 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -5181,7 +5181,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -14771,7 +14771,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -19670,7 +19670,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Custom content for item.\n  \t <b>index</b>: number, // Index of the menuitem\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Custom content for item.\n  \t <b>index</b>: number, // Index of the menuitem\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -27505,7 +27505,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>hasSubmenu</b>: boolean, // Whether or not there is a submenu\n  }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -27992,7 +27992,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -28477,7 +28477,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>root</b>: boolean, // State of the root\n  }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -33000,7 +33000,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>hasSubmenu</b>: boolean, // Whether or not there is a submenu\n  }",
                                     "description": "item slot's params."
                                 }
                             ],
@@ -41449,7 +41449,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n \t <b>hasSubmenu</b>: boolean, // Whether or not there is a submenu\n  }",
                                     "description": "item slot's params."
                                 }
                             ],

From 1359cd0b1594aa60ec9420dd2a6006c03c21b19f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 30 Aug 2023 16:33:42 +0300
Subject: [PATCH 3/7] Added menu docs for router

---
 doc/breadcrumb/RouterDoc.vue  | 127 +++++++++
 doc/contextmenu/RouterDoc.vue | 109 ++++++++
 doc/dock/RouterDoc.vue        |   8 +
 doc/megamenu/RouterDoc.vue    | 467 ++++++++++++++++++++++++++++++++
 doc/megamenu/TemplateDoc.vue  |  67 +++++
 doc/menu/RouterDoc.vue        |   2 +-
 doc/menubar/RouterDoc.vue     | 488 ++++++++++++++++++++++++++++++++++
 doc/menubar/TemplateDoc.vue   |  67 +++++
 doc/panelmenu/RouterDoc.vue   |   8 +
 doc/tieredmenu/RouterDoc.vue  | 455 +++++++++++++++++++++++++++++++
 pages/breadcrumb/index.vue    |   6 +
 pages/contextmenu/index.vue   |   6 +
 pages/dock/index.vue          |   6 +
 pages/megamenu/index.vue      |   6 +
 pages/menubar/index.vue       |   6 +
 pages/panelmenu/index.vue     |   6 +
 pages/tieredmenu/index.vue    |   6 +
 17 files changed, 1839 insertions(+), 1 deletion(-)
 create mode 100644 doc/breadcrumb/RouterDoc.vue
 create mode 100644 doc/contextmenu/RouterDoc.vue
 create mode 100644 doc/dock/RouterDoc.vue
 create mode 100644 doc/megamenu/RouterDoc.vue
 create mode 100644 doc/menubar/RouterDoc.vue
 create mode 100644 doc/panelmenu/RouterDoc.vue
 create mode 100644 doc/tieredmenu/RouterDoc.vue

diff --git a/doc/breadcrumb/RouterDoc.vue b/doc/breadcrumb/RouterDoc.vue
new file mode 100644
index 000000000..eb92679b9
--- /dev/null
+++ b/doc/breadcrumb/RouterDoc.vue
@@ -0,0 +1,127 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-if="item.icon" v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </Breadcrumb>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                route: '/'
+            },
+            items: [{ label: 'Computer' }, { label: 'Notebook' }, { label: 'Accessories' }, { label: 'Backpacks' }, { label: 'Item' }],
+            code: {
+                basic: `<Breadcrumb :home="home" :model="items">
+    <template #item="{ label, item, props }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-if="item.icon" v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+        </a>
+    </template>
+</Breadcrumb>`,
+                options: `<template>
+    <div class="card flex justify-content-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-if="item.icon" v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </Breadcrumb>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            home: {
+                icon: 'pi pi-home',
+                route: '/'
+            },
+            items: [
+                {label: 'Computer'},
+                {label: 'Notebook'},
+                {label: 'Accessories'},
+                {label: 'Backpacks'},
+                {label: 'Item'}
+            ]
+        }
+    }
+}
+<\/script>`,
+                composition: `<template>
+    <div class="card flex justify-content-center">
+        <Breadcrumb :home="home" :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-if="item.icon" v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </Breadcrumb>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const home = ref({
+    icon: 'pi pi-home',
+    route: '/'
+});
+const items = ref([
+    {label: 'Computer'},
+    {label: 'Notebook'},
+    {label: 'Accessories'},
+    {label: 'Backpacks'},
+    {label: 'Item'}
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/contextmenu/RouterDoc.vue b/doc/contextmenu/RouterDoc.vue
new file mode 100644
index 000000000..0fd5afd0e
--- /dev/null
+++ b/doc/contextmenu/RouterDoc.vue
@@ -0,0 +1,109 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
+        </p>
+    </DocSectionText>
+    <div class="card flex md:justify-content-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+        <ContextMenu ref="routemenu" :model="items">
+            <template #item="{ label, item, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </template>
+        </ContextMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'View', icon: 'pi pi-fw pi-search' },
+                { label: 'Delete', icon: 'pi pi-fw pi-trash' },
+                { separator: true },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    route: '/fileupload'
+                }
+            ],
+            code: {
+                basic: `<img alt="Logo" src="/images/nature/nature3.jpg" class="w-full md:w-auto" @contextmenu="onImageRightClick" aria-haspopup="true" />
+<ContextMenu ref="routemenu" :model="items" />`,
+                options: `<template>
+    <div class="card flex md:justify-content-center">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu ref="routemenu" :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                { label: 'View', icon: 'pi pi-fw pi-search' },
+                { label: 'Delete', icon: 'pi pi-fw pi-trash' },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-upload',
+                    route: '/fileupload'
+                }
+            ]
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.routemenu.show(event);
+        }
+    }
+};
+<\/script>`,
+                composition: `<template>
+    <div class="card">
+        <img alt="Logo" src="https://primefaces.org/cdn/primevue/images/nature/nature3.jpg" @contextmenu="onImageRightClick" class="w-full md:w-auto" aria-haspopup="true" />
+        <ContextMenu ref="routemenu" :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const routemenu = ref();
+const items = ref([
+    { label: 'View', icon: 'pi pi-fw pi-search' },
+    { label: 'Delete', icon: 'pi pi-fw pi-trash' },
+    {
+        label: 'Upload',
+        icon: 'pi pi-upload',
+        route: '/fileupload'
+    }
+]);
+
+const onImageRightClick = (event) => {
+    routemenu.value.show(event);
+};
+
+<\/script>`
+            }
+        };
+    },
+    methods: {
+        onImageRightClick(event) {
+            this.$refs.routemenu.show(event);
+        }
+    }
+};
+</script>
diff --git a/doc/dock/RouterDoc.vue b/doc/dock/RouterDoc.vue
new file mode 100644
index 000000000..dc9dc9f95
--- /dev/null
+++ b/doc/dock/RouterDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/megamenu/RouterDoc.vue b/doc/megamenu/RouterDoc.vue
new file mode 100644
index 000000000..bab93c05d
--- /dev/null
+++ b/doc/megamenu/RouterDoc.vue
@@ -0,0 +1,467 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
+        </p>
+    </DocSectionText>
+    <div class="card">
+        <MegaMenu :model="items">
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </MegaMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Videos',
+                    icon: 'pi pi-fw pi-video',
+                    items: [
+                        [
+                            {
+                                label: 'Video 1',
+                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                            },
+                            {
+                                label: 'Video 2',
+                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Video 3',
+                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                            },
+                            {
+                                label: 'Video 4',
+                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        [
+                            {
+                                label: 'User 1',
+                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                            },
+                            {
+                                label: 'User 2',
+                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 3',
+                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                            },
+                            {
+                                label: 'User 4',
+                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 5',
+                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                            },
+                            {
+                                label: 'User 6',
+                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        [
+                            {
+                                label: 'Event 1',
+                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                            },
+                            {
+                                label: 'Event 2',
+                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Event 3',
+                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                            },
+                            {
+                                label: 'Event 4',
+                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    items: [
+                        [
+                            {
+                                label: 'Setting 1',
+                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                            },
+                            {
+                                label: 'Setting 2',
+                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                            },
+                            {
+                                label: 'Setting 3',
+                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Technology 4',
+                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                }
+            ],
+            code: {
+                basic: `<MegaMenu :model="items">
+    <template #item="{ label, item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+        </a>
+    </template>
+</MegaMenu>`,
+                options: `<template>
+    <div class="card">
+        <MegaMenu :model="items">
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </MegaMenu>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'Videos',
+                    icon: 'pi pi-fw pi-video',
+                    items: [
+                        [
+                            {
+                                label: 'Video 1',
+                                items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                            },
+                            {
+                                label: 'Video 2',
+                                items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Video 3',
+                                items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                            },
+                            {
+                                label: 'Video 4',
+                                items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Users',
+                    icon: 'pi pi-fw pi-users',
+                    items: [
+                        [
+                            {
+                                label: 'User 1',
+                                items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                            },
+                            {
+                                label: 'User 2',
+                                items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 3',
+                                items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                            },
+                            {
+                                label: 'User 4',
+                                items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'User 5',
+                                items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                            },
+                            {
+                                label: 'User 6',
+                                items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        [
+                            {
+                                label: 'Event 1',
+                                items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                            },
+                            {
+                                label: 'Event 2',
+                                items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Event 3',
+                                items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                            },
+                            {
+                                label: 'Event 4',
+                                items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Settings',
+                    icon: 'pi pi-fw pi-cog',
+                    items: [
+                        [
+                            {
+                                label: 'Setting 1',
+                                items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                            },
+                            {
+                                label: 'Setting 2',
+                                items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                            },
+                            {
+                                label: 'Setting 3',
+                                items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                            }
+                        ],
+                        [
+                            {
+                                label: 'Technology 4',
+                                items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                            }
+                        ]
+                    ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `<template>
+    <div class="card">
+        <MegaMenu :model="items">
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </MegaMenu>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'Videos',
+        icon: 'pi pi-fw pi-video',
+        items: [
+            [
+                {
+                    label: 'Video 1',
+                    items: [{ label: 'Video 1.1' }, { label: 'Video 1.2' }]
+                },
+                {
+                    label: 'Video 2',
+                    items: [{ label: 'Video 2.1' }, { label: 'Video 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Video 3',
+                    items: [{ label: 'Video 3.1' }, { label: 'Video 3.2' }]
+                },
+                {
+                    label: 'Video 4',
+                    items: [{ label: 'Video 4.1' }, { label: 'Video 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Users',
+        icon: 'pi pi-fw pi-users',
+        items: [
+            [
+                {
+                    label: 'User 1',
+                    items: [{ label: 'User 1.1' }, { label: 'User 1.2' }]
+                },
+                {
+                    label: 'User 2',
+                    items: [{ label: 'User 2.1' }, { label: 'User 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'User 3',
+                    items: [{ label: 'User 3.1' }, { label: 'User 3.2' }]
+                },
+                {
+                    label: 'User 4',
+                    items: [{ label: 'User 4.1' }, { label: 'User 4.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'User 5',
+                    items: [{ label: 'User 5.1' }, { label: 'User 5.2' }]
+                },
+                {
+                    label: 'User 6',
+                    items: [{ label: 'User 6.1' }, { label: 'User 6.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            [
+                {
+                    label: 'Event 1',
+                    items: [{ label: 'Event 1.1' }, { label: 'Event 1.2' }]
+                },
+                {
+                    label: 'Event 2',
+                    items: [{ label: 'Event 2.1' }, { label: 'Event 2.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Event 3',
+                    items: [{ label: 'Event 3.1' }, { label: 'Event 3.2' }]
+                },
+                {
+                    label: 'Event 4',
+                    items: [{ label: 'Event 4.1' }, { label: 'Event 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Settings',
+        icon: 'pi pi-fw pi-cog',
+        items: [
+            [
+                {
+                    label: 'Setting 1',
+                    items: [{ label: 'Setting 1.1' }, { label: 'Setting 1.2' }]
+                },
+                {
+                    label: 'Setting 2',
+                    items: [{ label: 'Setting 2.1' }, { label: 'Setting 2.2' }]
+                },
+                {
+                    label: 'Setting 3',
+                    items: [{ label: 'Setting 3.1' }, { label: 'Setting 3.2' }]
+                }
+            ],
+            [
+                {
+                    label: 'Technology 4',
+                    items: [{ label: 'Setting 4.1' }, { label: 'Setting 4.2' }]
+                }
+            ]
+        ]
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-fw pi-upload',
+        route: '/fileupload'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index a030494db..4f7b55f27 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -9,6 +9,19 @@
                     <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
                 </span>
             </template>
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                </a>
+            </template>
             <template #end>
                 <InputText placeholder="Search" type="text" />
             </template>
@@ -135,6 +148,11 @@ export default {
                             }
                         ]
                     ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
                 }
             ],
             code: {
@@ -142,6 +160,19 @@ export default {
     <template #start>
         <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
     </template>
+    <template #item="{ label, item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+        </a>
+    </template>
     <template #end>
         <InputText placeholder="Search" type="text" />
     </template>
@@ -154,6 +185,19 @@ export default {
                     <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
                 </span>
             </template>
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+                </a>
+            </template>
             <template #end>
                 <InputText placeholder="Search" type="text" />
             </template>
@@ -279,6 +323,11 @@ export default {
                             }
                         ]
                     ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
                 }
             ]
         };
@@ -291,6 +340,19 @@ export default {
             <img alt="logo" src="https://primefaces.org/cdn/primevue/images/primevue-logo-dark.svg" height="24" class="mr-2" />
         </span>
     </template>
+    <template #item="{ label, item, props, hasSubmenu }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <span :class="[hasSubmenu && 'pi pi-fw pi-angle-down']" v-bind="props.submenuicon" />
+        </a>
+    </template>
     <template #end>
         <InputText placeholder="Search" type="text" />
     </template>
@@ -413,6 +475,11 @@ const items = ref([
                 }
             ]
         ]
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-fw pi-upload',
+        route: '/fileupload'
     }
 ]);
 <\/script>`
diff --git a/doc/menu/RouterDoc.vue b/doc/menu/RouterDoc.vue
index 712525558..30a6a1eba 100644
--- a/doc/menu/RouterDoc.vue
+++ b/doc/menu/RouterDoc.vue
@@ -1,7 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs">
         <p>
-            Since v3.23.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
             <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
         </p>
     </DocSectionText>
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
new file mode 100644
index 000000000..003fb5457
--- /dev/null
+++ b/doc/menubar/RouterDoc.vue
@@ -0,0 +1,488 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
+        </p>
+    </DocSectionText>
+    <div class="card relative z-2">
+        <Menubar :model="items">
+            <template #item="{ label, item, props, root }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    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'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                basic: `<Menubar :model="items">
+    <template #item="{ label, item, props, root }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+        </a>
+    </template>
+</Menubar>`,
+                options: `<template>
+    <div class="card relative z-2">
+        <Menubar :model="items">
+            <template #item="{ label, item, props, root }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    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'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `<template>
+    <div class="card relative z-2">
+        <Menubar :model="items">
+            <template #item="{ label, item, props, root }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </Menubar>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        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'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-fw pi-upload',
+        route: '/fileupload'
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index c13678eaf..5fa837ccc 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -7,6 +7,19 @@
             <template #start>
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
             </template>
+            <template #item="{ label, item, props, root }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                </a>
+            </template>
             <template #end>
                 <InputText placeholder="Search" type="text" />
             </template>
@@ -137,6 +150,11 @@ export default {
                         }
                     ]
                 },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                },
                 {
                     label: 'Quit',
                     icon: 'pi pi-fw pi-power-off'
@@ -147,6 +165,19 @@ export default {
     <template #start>
         <img alt="logo" src="/images/logo.svg" height="40" class="mr-2" />
     </template>
+    <template #item="{ label, item, props, root }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action">
+                <span v-bind="props.icon" />
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+            <span v-bind="props.icon" />
+            <span v-bind="props.label">{{ label }}</span>
+            <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+        </a>
+    </template>
     <template #end>
         <InputText placeholder="Search" type="text" />
     </template>
@@ -157,6 +188,19 @@ export default {
             <template #start>
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
             </template>
+            <template #item="{ label, item, props, root }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                </a>
+            </template>
             <template #end>
                 <InputText placeholder="Search" type="text" />
             </template>
@@ -286,6 +330,11 @@ export default {
                         }
                     ]
                 },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                },
                 {
                     label: 'Quit',
                     icon: 'pi pi-fw pi-power-off'
@@ -301,6 +350,19 @@ export default {
             <template #start>
                 <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" height="40" class="mr-2" />
             </template>
+            <template #item="{ label, item, props, root }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span :class="[root ? 'pi pi-fw pi-angle-down' : 'pi pi-fw pi-angle-right']" v-bind="props.submenuicon" />
+                </a>
+            </template>
             <template #end>
                 <InputText placeholder="Search" type="text" />
             </template>
@@ -429,6 +491,11 @@ const items = ref([
             }
         ]
     },
+    {
+        label: 'Upload',
+        icon: 'pi pi-fw pi-upload',
+        route: '/fileupload'
+    },
     {
         label: 'Quit',
         icon: 'pi pi-fw pi-power-off'
diff --git a/doc/panelmenu/RouterDoc.vue b/doc/panelmenu/RouterDoc.vue
new file mode 100644
index 000000000..dc9dc9f95
--- /dev/null
+++ b/doc/panelmenu/RouterDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
new file mode 100644
index 000000000..82394cdd2
--- /dev/null
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -0,0 +1,455 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>.
+        </p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items">
+            <template #item="{ label, item, props, hasSubmenu }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action">
+                        <span v-bind="props.icon" />
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <a v-else :href="item.url" :target="item.target" v-bind="props.action">
+                    <span v-bind="props.icon" />
+                    <span v-bind="props.label">{{ label }}</span>
+                    <span v-if="hasSubmenu" class="pi pi-fw pi-angle-right" v-bind="props.submenuicon" />
+                </a>
+            </template>
+        </TieredMenu>
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    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'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ],
+            code: {
+                basic: `<TieredMenu :model="items" />`,
+                options: `<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [
+                {
+                    label: 'File',
+                    icon: 'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon: 'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon: 'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon: 'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon: 'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator: true
+                        },
+                        {
+                            label: 'Export',
+                            icon: 'pi pi-fw pi-external-link'
+                        }
+                    ]
+                },
+                {
+                    label: 'Edit',
+                    icon: 'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon: 'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon: 'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon: 'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon: 'pi pi-fw pi-align-justify'
+                        }
+                    ]
+                },
+                {
+                    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'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Events',
+                    icon: 'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon: 'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon: 'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon: 'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon: 'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label: 'Upload',
+                    icon: 'pi pi-fw pi-upload',
+                    route: '/fileupload'
+                },
+                {
+                    separator: true
+                },
+                {
+                    label: 'Quit',
+                    icon: 'pi pi-fw pi-power-off'
+                }
+            ]
+        };
+    }
+};
+<\/script>`,
+                composition: `<template>
+    <div class="card flex justify-content-center">
+        <TieredMenu :model="items" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+            
+const items = ref([
+    {
+        label: 'File',
+        icon: 'pi pi-fw pi-file',
+        items: [
+            {
+                label: 'New',
+                icon: 'pi pi-fw pi-plus',
+                items: [
+                    {
+                        label: 'Bookmark',
+                        icon: 'pi pi-fw pi-bookmark'
+                    },
+                    {
+                        label: 'Video',
+                        icon: 'pi pi-fw pi-video'
+                    }
+                ]
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-fw pi-trash'
+            },
+            {
+                separator: true
+            },
+            {
+                label: 'Export',
+                icon: 'pi pi-fw pi-external-link'
+            }
+        ]
+    },
+    {
+        label: 'Edit',
+        icon: 'pi pi-fw pi-pencil',
+        items: [
+            {
+                label: 'Left',
+                icon: 'pi pi-fw pi-align-left'
+            },
+            {
+                label: 'Right',
+                icon: 'pi pi-fw pi-align-right'
+            },
+            {
+                label: 'Center',
+                icon: 'pi pi-fw pi-align-center'
+            },
+            {
+                label: 'Justify',
+                icon: 'pi pi-fw pi-align-justify'
+            }
+        ]
+    },
+    {
+        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'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Events',
+        icon: 'pi pi-fw pi-calendar',
+        items: [
+            {
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [
+                    {
+                        label: 'Save',
+                        icon: 'pi pi-fw pi-calendar-plus'
+                    },
+                    {
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            },
+            {
+                label: 'Archieve',
+                icon: 'pi pi-fw pi-calendar-times',
+                items: [
+                    {
+                        label: 'Remove',
+                        icon: 'pi pi-fw pi-calendar-minus'
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        label: 'Upload',
+        icon: 'pi pi-fw pi-upload',
+        route: '/fileupload'
+    },
+    {
+        separator: true
+    },
+    {
+        label: 'Quit',
+        icon: 'pi pi-fw pi-power-off'
+    }
+]);
+<\/script>`
+            }
+        };
+    }
+};
+</script>
diff --git a/pages/breadcrumb/index.vue b/pages/breadcrumb/index.vue
index b1c095441..8bb085ec6 100755
--- a/pages/breadcrumb/index.vue
+++ b/pages/breadcrumb/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/breadcrumb/AccessibilityDoc';
 import BasicDoc from '@/doc/breadcrumb/BasicDoc';
 import ImportDoc from '@/doc/breadcrumb/ImportDoc';
+import RouterDoc from '@/doc/breadcrumb/RouterDoc';
 import TemplateDoc from '@/doc/breadcrumb/TemplateDoc';
 import PTComponent from '@/doc/breadcrumb/pt/index.vue';
 import ThemingDoc from '@/doc/breadcrumb/theming/index.vue';
@@ -37,6 +38,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/contextmenu/index.vue b/pages/contextmenu/index.vue
index 2749ae1b2..5a73eda05 100755
--- a/pages/contextmenu/index.vue
+++ b/pages/contextmenu/index.vue
@@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/contextmenu/AccessibilityDoc';
 import BasicDoc from '@/doc/contextmenu/BasicDoc';
 import DocumentDoc from '@/doc/contextmenu/DocumentDoc';
 import ImportDoc from '@/doc/contextmenu/ImportDoc';
+import RouterDoc from '@/doc/contextmenu/RouterDoc';
 import PTComponent from '@/doc/contextmenu/pt/index.vue';
 import ThemingDoc from '@/doc/contextmenu/theming/index.vue';
 
@@ -37,6 +38,11 @@ export default {
                     label: 'Document',
                     component: DocumentDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/dock/index.vue b/pages/dock/index.vue
index 2da4e5adc..f3be85f91 100644
--- a/pages/dock/index.vue
+++ b/pages/dock/index.vue
@@ -7,6 +7,7 @@ import AccessibilityDoc from '@/doc/dock/AccessibilityDoc';
 import AdvancedDoc from '@/doc/dock/AdvancedDoc';
 import BasicDoc from '@/doc/dock/BasicDoc';
 import ImportDoc from '@/doc/dock/ImportDoc';
+import RouterDoc from '@/doc/dock/RouterDoc';
 import PTComponent from '@/doc/dock/pt/index.vue';
 import ThemingDoc from '@/doc/dock/theming/index.vue';
 
@@ -29,6 +30,11 @@ export default {
                     label: 'Advanced',
                     component: AdvancedDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/megamenu/index.vue b/pages/megamenu/index.vue
index b343a47e3..110bba955 100755
--- a/pages/megamenu/index.vue
+++ b/pages/megamenu/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/megamenu/AccessibilityDoc';
 import BasicDoc from '@/doc/megamenu/BasicDoc';
 import ImportDoc from '@/doc/megamenu/ImportDoc';
+import RouterDoc from '@/doc/megamenu/RouterDoc';
 import TemplateDoc from '@/doc/megamenu/TemplateDoc';
 import VerticalDoc from '@/doc/megamenu/VerticalDoc';
 import PTComponent from '@/doc/megamenu/pt/index.vue';
@@ -43,6 +44,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/menubar/index.vue b/pages/menubar/index.vue
index 93a47858d..a69d00d5d 100755
--- a/pages/menubar/index.vue
+++ b/pages/menubar/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/menubar/AccessibilityDoc';
 import BasicDoc from '@/doc/menubar/BasicDoc';
 import ImportDoc from '@/doc/menubar/ImportDoc';
+import RouterDoc from '@/doc/menubar/RouterDoc';
 import TemplateDoc from '@/doc/menubar/TemplateDoc';
 import PTComponent from '@/doc/menubar/pt/index.vue';
 import ThemingDoc from '@/doc/menubar/theming/index.vue';
@@ -37,6 +38,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/panelmenu/index.vue b/pages/panelmenu/index.vue
index 4831e26a3..5df76fdc7 100755
--- a/pages/panelmenu/index.vue
+++ b/pages/panelmenu/index.vue
@@ -16,6 +16,7 @@ import BasicDoc from '@/doc/panelmenu/BasicDoc';
 import ImportDoc from '@/doc/panelmenu/ImportDoc';
 import MultipleDoc from '@/doc/panelmenu/MultipleDoc';
 import ProgrammaticDoc from '@/doc/panelmenu/ProgrammaticDoc';
+import RouterDoc from '@/doc/panelmenu/RouterDoc';
 import PTComponent from '@/doc/panelmenu/pt/index.vue';
 import ThemingDoc from '@/doc/panelmenu/theming/index.vue';
 
@@ -43,6 +44,11 @@ export default {
                     label: 'Multiple',
                     component: MultipleDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',
diff --git a/pages/tieredmenu/index.vue b/pages/tieredmenu/index.vue
index 9a51d3658..b0617cf6b 100755
--- a/pages/tieredmenu/index.vue
+++ b/pages/tieredmenu/index.vue
@@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/tieredmenu/AccessibilityDoc';
 import BasicDoc from '@/doc/tieredmenu/BasicDoc';
 import ImportDoc from '@/doc/tieredmenu/ImportDoc';
 import PopupDoc from '@/doc/tieredmenu/PopupDoc';
+import RouterDoc from '@/doc/tieredmenu/RouterDoc';
 import PTComponent from '@/doc/tieredmenu/pt/index.vue';
 import ThemingDoc from '@/doc/tieredmenu/theming/index.vue';
 
@@ -37,6 +38,11 @@ export default {
                     label: 'Popup',
                     component: PopupDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',

From 637b3b398c1055e42770e14973b05a27e28fa05a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 30 Aug 2023 17:29:26 +0300
Subject: [PATCH 4/7] Refactor #4351 - For Steps

---
 components/lib/steps/Steps.d.ts | 12 ++++++++++++
 components/lib/steps/Steps.vue  | 34 +++++++++++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 2 deletions(-)

diff --git a/components/lib/steps/Steps.d.ts b/components/lib/steps/Steps.d.ts
index 389f3b91e..3b2563b6e 100755
--- a/components/lib/steps/Steps.d.ts
+++ b/components/lib/steps/Steps.d.ts
@@ -137,6 +137,18 @@ export interface StepsSlots {
          * Menuitem instance
          */
         item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Order of the menuitem
+         */
+        index: number;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: (...args: any) => string;
     }): VNode[];
 }
 
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index c32c160d3..447b4c0a1 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -23,7 +23,7 @@
                             <span :class="cx('label')" v-bind="getPTOptions('label', item, index)">{{ label(item) }}</span>
                         </span>
                     </template>
-                    <component v-else :is="$slots.item" :item="item"></component>
+                    <component v-else :is="$slots.item" :item="item" :index="index" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
                 </li>
             </template>
         </ol>
@@ -32,11 +32,17 @@
 
 <script>
 import { DomHandler } from 'primevue/utils';
+import { mergeProps } from 'vue';
 import BaseSteps from './BaseSteps.vue';
 
 export default {
     name: 'Steps',
     extends: BaseSteps,
+    beforeMount() {
+        if (!this.$slots.item) {
+            console.warn('In future versions, vue-router support will be removed. Item templating should be used.');
+        }
+    },
     mounted() {
         const firstItem = this.findFirstItem();
 
@@ -159,7 +165,7 @@ export default {
             focusableItem.focus();
         },
         isActive(item) {
-            return item.to ? this.$router.resolve(item.to).path === this.$route.path : false;
+            return item.to || item.route ? this.$router.resolve(item.to || item.route).path === this.$route.path : false;
         },
         isItemDisabled(item) {
             return this.disabled(item) || (this.readonly && !this.isActive(item));
@@ -172,6 +178,30 @@ export default {
         },
         label(item) {
             return typeof item.label === 'function' ? item.label() : item.label;
+        },
+        getMenuItemProps(item, index) {
+            return {
+                action: mergeProps(
+                    {
+                        class: this.cx('action'),
+                        onClick: ($event) => this.onItemClick($event, item),
+                        onKeyDown: ($event) => this.onItemKeydown($event, item)
+                    },
+                    this.getPTOptions('action', item, index)
+                ),
+                step: mergeProps(
+                    {
+                        class: this.cx('step')
+                    },
+                    this.getPTOptions('step', item, index)
+                ),
+                label: mergeProps(
+                    {
+                        class: this.cx('label')
+                    },
+                    this.getPTOptions('label', item, index)
+                )
+            };
         }
     }
 };

From b00dfe53d1d2c98532b53543cbddead8619fba55 Mon Sep 17 00:00:00 2001
From: GitHub Actions Bot <>
Date: Wed, 30 Aug 2023 14:30:21 +0000
Subject: [PATCH 5/7] Update API doc

---
 doc/common/apidoc/index.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 7f90b572b..9d5835272 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -39208,7 +39208,7 @@
                                 {
                                     "name": "scope",
                                     "optional": false,
-                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  }",
+                                    "type": "{\n  \t <b>item</b>: MenuItem, // Menuitem instance\n  \t <b>label</b>: undefined, // Label property of the menuitem\n  \t <b>index</b>: number, // Order of the menuitem\n \t <b>props</b>: (args: any) &rArr; string, // Binding properties of the menuitem\n }",
                                     "description": "item slot's params."
                                 }
                             ],

From 81b2102c5657becd4bef0eb5a7f1b6eb5c0452ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 30 Aug 2023 17:38:19 +0300
Subject: [PATCH 6/7] Steps docs for router

---
 doc/steps/BasicDoc.vue       | 84 +++++++++++++++++++++++++++++-------
 doc/steps/InteractiveDoc.vue | 74 ++++++++++++++++++++++---------
 doc/steps/RouterDoc.vue      |  8 ++++
 doc/tieredmenu/RouterDoc.vue |  2 +-
 pages/steps.vue              |  6 +++
 5 files changed, 137 insertions(+), 37 deletions(-)
 create mode 100644 doc/steps/RouterDoc.vue

diff --git a/doc/steps/BasicDoc.vue b/doc/steps/BasicDoc.vue
index 181611af8..617a9cb39 100644
--- a/doc/steps/BasicDoc.vue
+++ b/doc/steps/BasicDoc.vue
@@ -3,7 +3,20 @@
         <p>Steps requires a collection of menuitems as its <i>model</i>.</p>
     </DocSectionText>
     <div class="card">
-        <Steps :model="items" aria-label="Form Steps" :readonly="false" />
+        <Steps :model="items" aria-label="Form Steps" :readonly="false">
+            <template #item="{ label, item, index, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+                <span v-else v-bind="props.action">
+                    <span v-bind="props.step">{{ index + 1 }}</span>
+                    <span v-bind="props.label">{{ label }}</span>
+                </span>
+            </template>
+        </Steps>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,27 +28,53 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/steps'
+                    route: '/steps'
                 },
                 {
                     label: 'Seat',
-                    to: '/steps/seat'
+                    route: '/steps/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/steps/payment'
+                    route: '/steps/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/steps/confirmation'
+                    route: '/steps/confirmation'
                 }
             ],
             code: {
-                basic: `<Steps :model="items" aria-label="Form Steps" />`,
+                basic: `<Steps :model="items" aria-label="Form Steps" :readonly="false">
+    <template #item="{ label, item, index, props }">
+        <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+            <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                <span v-bind="props.step">{{ index + 1 }}</span>
+                <span v-bind="props.label">{{ label }}</span>
+            </a>
+        </router-link>
+        <span v-else v-bind="props.action">
+            <span v-bind="props.step">{{ index + 1 }}</span>
+            <span v-bind="props.label">{{ label }}</span>
+        </span>
+    </template>
+</Steps>`,
                 options: `<template>
     <div>        
         <div class="card">
-            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps" :readonly="false">
+                <template #item="{ label, item, index, props }">
+                    <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                        <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                            <span v-bind="props.step">{{ index + 1 }}</span>
+                            <span v-bind="props.label">{{ label }}</span>
+                        </a>
+                    </router-link>
+                    <span v-else v-bind="props.action">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </span>
+                </template>
+            </Steps>
         </div>
     </div>
 </template>
@@ -47,19 +86,19 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/'
+                    route: '/steps'
                 },
                 {
                     label: 'Seat',
-                    to: '/seat'
+                    route: '/steps/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/payment'
+                    route: '/steps/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/confirmation'
+                    route: '/steps/confirmation'
                 }
             ]
         }
@@ -69,7 +108,20 @@ export default {
                 composition: `<template>
     <div>
         <div class="card">
-            <Steps :model="items" :readonly="false" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps" :readonly="false">
+                <template #item="{ label, item, index, props }">
+                    <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                        <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                            <span v-bind="props.step">{{ index + 1 }}</span>
+                            <span v-bind="props.label">{{ label }}</span>
+                        </a>
+                    </router-link>
+                    <span v-else v-bind="props.action">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </span>
+                </template>
+            </Steps>
         </div>
     </div>
 </template>
@@ -80,19 +132,19 @@ import { ref } from "vue";
 const items = ref([
     {
         label: 'Personal',
-        to: "/"
+        route: "/"
     },
     {
         label: 'Seat',
-        to: "/seat",
+        route: "/seat",
     },
     {
         label: 'Payment',
-        to: "/payment",
+        route: "/payment",
     },
     {
         label: 'Confirmation',
-        to: "/confirmation",
+        route: "/confirmation",
     }
 ]);
 <\/script>`
diff --git a/doc/steps/InteractiveDoc.vue b/doc/steps/InteractiveDoc.vue
index d439c215b..a377aa5b0 100644
--- a/doc/steps/InteractiveDoc.vue
+++ b/doc/steps/InteractiveDoc.vue
@@ -3,7 +3,16 @@
         <p>In order to add interactivity to the component, disable <i>readonly</i> to control the Steps.</p>
     </DocSectionText>
     <div class="card">
-        <Steps :model="items" aria-label="Form Steps" />
+        <Steps :model="items" aria-label="Form Steps">
+            <template #item="{ label, item, index, props }">
+                <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                    <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                        <span v-bind="props.step">{{ index + 1 }}</span>
+                        <span v-bind="props.label">{{ label }}</span>
+                    </a>
+                </router-link>
+            </template>
+        </Steps>
     </div>
 
     <NuxtPage v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@@ -22,25 +31,34 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/steps'
+                    route: '/steps'
                 },
                 {
                     label: 'Seat',
-                    to: '/steps/seat'
+                    route: '/steps/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/steps/payment'
+                    route: '/steps/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/steps/confirmation'
+                    route: '/steps/confirmation'
                 }
             ],
             formObject: {},
             code: {
                 basic: `<div class="card">
-    <Steps :model="items" aria-label="Form Steps" />
+    <Steps :model="items" aria-label="Form Steps">
+        <template #item="{ label, item, index, props }">
+            <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                    <span v-bind="props.step">{{ index + 1 }}</span>
+                    <span v-bind="props.label">{{ label }}</span>
+                </a>
+            </router-link>
+        </template>
+    </Steps>
 </div>
 
 <router-view v-slot="{ Component }" :formData="formObject" @prev-page="prevPage($event)" @next-page="nextPage($event)" @complete="complete">
@@ -50,11 +68,19 @@ export default {
 </router-view>`,
                 options: `<template>
     <div>
-        <Toast />
-        
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps">
+                <template #item="{ label, item, index, props }">
+                    <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                        <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                            <span v-bind="props.step">{{ index + 1 }}</span>
+                            <span v-bind="props.label">{{ label }}</span>
+                        </a>
+                    </router-link>
+                </template>
+            </Steps>
         </div>
+        <Toast />
 
         <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
             <keep-alive>
@@ -71,19 +97,19 @@ export default {
             items: [
                 {
                     label: 'Personal',
-                    to: '/'
+                    route: '/'
                 },
                 {
                     label: 'Seat',
-                    to: '/seat'
+                    route: '/seat'
                 },
                 {
                     label: 'Payment',
-                    to: '/payment'
+                    route: '/payment'
                 },
                 {
                     label: 'Confirmation',
-                    to: '/confirmation'
+                    route: '/confirmation'
                 }
             ],
             formObject: {}
@@ -118,11 +144,19 @@ export default {
 </style>`,
                 composition: `<template>
     <div>
-        <Toast />
-
         <div class="card">
-            <Steps :model="items" aria-label="Form Steps" />
+            <Steps :model="items" aria-label="Form Steps">
+                <template #item="{ label, item, index, props }">
+                    <router-link v-if="item.route" v-slot="routerProps" :to="item.route" custom>
+                        <a :href="routerProps.href" v-bind="props.action" @click="($event) => routerProps.navigate($event)" @keydown.enter="($event) => routerProps.navigate($event)">
+                            <span v-bind="props.step">{{ index + 1 }}</span>
+                            <span v-bind="props.label">{{ label }}</span>
+                        </a>
+                    </router-link>
+                </template>
+            </Steps>
         </div>
+        <Toast />
 
         <router-view v-slot="{Component}" :formData="formObject" @prevPage="prevPage($event)" @nextPage="nextPage($event)" @complete="complete">
             <keep-alive>
@@ -142,19 +176,19 @@ const toast = useToast();
 const items = ref([
     {
         label: 'Personal',
-        to: "/"
+        route: "/"
     },
     {
         label: 'Seat',
-        to: "/seat",
+        route: "/seat",
     },
     {
         label: 'Payment',
-        to: "/payment",
+        route: "/payment",
     },
     {
         label: 'Confirmation',
-        to: "/confirmation",
+        route: "/confirmation",
     }
 ]);
 const formObject = ref({});
diff --git a/doc/steps/RouterDoc.vue b/doc/steps/RouterDoc.vue
new file mode 100644
index 000000000..de745dd60
--- /dev/null
+++ b/doc/steps/RouterDoc.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>
+            Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an <NuxtLink to="/steps/#basic">example</NuxtLink> with vue-router.
+        </p>
+    </DocSectionText>
+</template>
diff --git a/doc/tieredmenu/RouterDoc.vue b/doc/tieredmenu/RouterDoc.vue
index 82394cdd2..597c49be1 100644
--- a/doc/tieredmenu/RouterDoc.vue
+++ b/doc/tieredmenu/RouterDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>
             Since v3.33.0 the vue-router dependency of menu components is deprecated and templating should be used to define router links instead. This approach provides flexibility to be able to use any kind of router link component such as
-            <i>NuxtLink</i> or <i>router-link</i>.
+            <i>NuxtLink</i> or <i>router-link</i>. Here is an example with vue-router.
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
diff --git a/pages/steps.vue b/pages/steps.vue
index d7b183cdd..63547de31 100755
--- a/pages/steps.vue
+++ b/pages/steps.vue
@@ -15,6 +15,7 @@ import AccessibilityDoc from '@/doc/steps/AccessibilityDoc';
 import BasicDoc from '@/doc/steps/BasicDoc';
 import ImportDoc from '@/doc/steps/ImportDoc';
 import InteractiveDoc from '@/doc/steps/InteractiveDoc';
+import RouterDoc from '@/doc/steps/RouterDoc';
 import PTComponent from '@/doc/steps/pt/index.vue';
 import ThemingDoc from '@/doc/steps/theming/index.vue';
 
@@ -37,6 +38,11 @@ export default {
                     label: 'Interactive',
                     component: InteractiveDoc
                 },
+                {
+                    id: 'router',
+                    label: 'Router',
+                    component: RouterDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',

From acfaf6af9f896a0a2c58991b25253f91e0704b2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Thu, 31 Aug 2023 12:46:08 +0300
Subject: [PATCH 7/7] Unit test fixes after major updates

---
 components/lib/accordion/Accordion.spec.js    | 21 +------------------
 components/lib/badge/Badge.spec.js            | 10 ---------
 components/lib/blockui/BlockUI.spec.js        |  1 -
 components/lib/breadcrumb/Breadcrumb.spec.js  |  4 ++++
 .../lib/breadcrumb/BreadcrumbItem.spec.js     | 20 +++++-------------
 components/lib/button/Button.spec.js          |  2 +-
 .../lib/confirmdialog/ConfirmDialog.spec.js   |  4 ++--
 components/lib/datatable/DataTable.spec.js    |  2 +-
 components/lib/skeleton/Skeleton.spec.js      |  4 ++--
 components/lib/slider/Slider.spec.js          |  2 +-
 components/lib/speeddial/SpeedDial.spec.js    |  6 ++----
 components/lib/splitter/Splitter.spec.js      |  2 +-
 components/lib/tag/Tag.spec.js                |  2 +-
 13 files changed, 21 insertions(+), 59 deletions(-)

diff --git a/components/lib/accordion/Accordion.spec.js b/components/lib/accordion/Accordion.spec.js
index dd790c75b..003a4107d 100644
--- a/components/lib/accordion/Accordion.spec.js
+++ b/components/lib/accordion/Accordion.spec.js
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { expect, it } from 'vitest';
 import AccordionTab from '../accordiontab/AccordionTab.vue';
 import Accordion from './Accordion.vue';
-vi.mock('primevue/utils');
+
 describe('Accordion.vue', () => {
     let wrapper;
 
@@ -151,23 +151,4 @@ describe('Accordion.vue', () => {
         expect(findNextHeaderActionSpy).toHaveBeenCalled();
         expect(onTabHomeKeySpy).toHaveBeenCalled();
     });
-
-    it('When changeFocusedTab triggered and selectOnFocus is true changeActiveIndex should be triggered with valid parameters', async () => {
-        await wrapper.setProps({ selectOnFocus: true });
-        const changeActiveIndexSpy = vi.spyOn(wrapper.vm, 'changeActiveIndex');
-        const event = {};
-        const element = {
-            parentElement: {
-                parentElement: {
-                    dataset: {
-                        index: 0
-                    }
-                }
-            }
-        };
-
-        await wrapper.vm.changeFocusedTab(event, element);
-
-        expect(changeActiveIndexSpy).toHaveBeenCalledWith({}, wrapper.vm.tabs[0], 0);
-    });
 });
diff --git a/components/lib/badge/Badge.spec.js b/components/lib/badge/Badge.spec.js
index ae92fdecc..078d9e3dd 100644
--- a/components/lib/badge/Badge.spec.js
+++ b/components/lib/badge/Badge.spec.js
@@ -22,14 +22,4 @@ describe('Badge.vue', () => {
 
         expect(wrapper.vm.containerClass).not.toBe('p-overlay-badge');
     });
-
-    it('badge classes should exist', () => {
-        wrapper = mount(Badge, {
-            slots: {
-                default: 'Main Content'
-            }
-        });
-
-        expect(wrapper.vm.containerClass).toBe('p-overlay-badge');
-    });
 });
diff --git a/components/lib/blockui/BlockUI.spec.js b/components/lib/blockui/BlockUI.spec.js
index 0d4a4e35a..1168815cb 100644
--- a/components/lib/blockui/BlockUI.spec.js
+++ b/components/lib/blockui/BlockUI.spec.js
@@ -2,7 +2,6 @@ import { mount } from '@vue/test-utils';
 import { beforeEach, expect } from 'vitest';
 import BlockUI from './BlockUI.vue';
 
-vi.mock('primevue/utils');
 let wrapper = null;
 
 describe('BlockUI.vue', () => {
diff --git a/components/lib/breadcrumb/Breadcrumb.spec.js b/components/lib/breadcrumb/Breadcrumb.spec.js
index 7fb061bad..dd6dcf279 100644
--- a/components/lib/breadcrumb/Breadcrumb.spec.js
+++ b/components/lib/breadcrumb/Breadcrumb.spec.js
@@ -1,5 +1,6 @@
 import { mount } from '@vue/test-utils';
 import Breadcrumb from './Breadcrumb.vue';
+import BreadcrumbItem from './BreadcrumbItem.vue';
 
 describe('Breadcrumb', () => {
     it('should exist', () => {
@@ -8,6 +9,9 @@ describe('Breadcrumb', () => {
                 stubs: {
                     'router-link': true
                 },
+                components: {
+                    BreadcrumbItem
+                },
                 mocks: {
                     $router: {
                         currentRoute: {
diff --git a/components/lib/breadcrumb/BreadcrumbItem.spec.js b/components/lib/breadcrumb/BreadcrumbItem.spec.js
index 81f1fe9ad..6d5295b27 100644
--- a/components/lib/breadcrumb/BreadcrumbItem.spec.js
+++ b/components/lib/breadcrumb/BreadcrumbItem.spec.js
@@ -21,7 +21,9 @@ beforeEach(() => {
         },
         props: {
             item: { label: 'Computer', visible: () => true },
-            template: null
+            templates: {
+                item: undefined
+            }
         }
     });
 });
@@ -31,8 +33,8 @@ afterEach(() => {
 });
 
 describe('BreadcrumbItem', () => {
-    it('When component is mount, text should be exists', () => {
-        expect(wrapper.find('.p-menuitem-text').exists()).toBe(true);
+    it('When component is mount and template.item equal to null, text should not be exists', () => {
+        expect(wrapper.find('.p-menuitem-text').exists()).toBe(false);
     });
 
     it('When tag is triggered, onClick method should be called', async () => {
@@ -53,18 +55,6 @@ describe('BreadcrumbItem', () => {
         expect(spy).toHaveBeenCalled();
     });
 
-    it('When linkClass method called and isActive-isExactActive, tag classes should be effected', async () => {
-        await wrapper.setProps({ exact: true });
-
-        expect(wrapper.vm.linkClass({ isActive: true, isExactActive: true })).toEqual([
-            'p-menuitem-link',
-            {
-                'router-link-active': true,
-                'router-link-active-exact': true
-            }
-        ]);
-    });
-
     it('When item prop has a visible, visible method should be return falsy', async () => {
         await wrapper.setProps({ item: { label: 'Computer', visible: false, command: vi.fn() } });
 
diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js
index f0b70295e..73d278229 100644
--- a/components/lib/button/Button.spec.js
+++ b/components/lib/button/Button.spec.js
@@ -79,6 +79,6 @@ describe('Button.vue', () => {
             }
         });
 
-        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
+        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-section="root" data-pc-name="button" data-pd-ripple="true"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
     });
 });
diff --git a/components/lib/confirmdialog/ConfirmDialog.spec.js b/components/lib/confirmdialog/ConfirmDialog.spec.js
index 6720e3b1d..94d7ab4d1 100644
--- a/components/lib/confirmdialog/ConfirmDialog.spec.js
+++ b/components/lib/confirmdialog/ConfirmDialog.spec.js
@@ -32,7 +32,7 @@ describe('ConfirmDialog', () => {
 
         await wrapper.vm.reject();
 
-        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
     });
 
     it('should dialog trigger the accept function', async () => {
@@ -128,7 +128,7 @@ describe('ConfirmDialog', () => {
 
         await dialogCloseBtn.trigger('click');
 
-        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-dialog-mask .p-dialog.p-component').exists()).toBe(false);
     });
 
     it('should position work', async () => {
diff --git a/components/lib/datatable/DataTable.spec.js b/components/lib/datatable/DataTable.spec.js
index 80c3b0184..52f152cf0 100644
--- a/components/lib/datatable/DataTable.spec.js
+++ b/components/lib/datatable/DataTable.spec.js
@@ -646,7 +646,7 @@ describe('DataTable.vue', () => {
     it('should vertical scroll', async () => {
         await wrapper.setProps({ scrollable: true, scrollHeight: '100px' });
 
-        expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('max-height: 100px;');
+        expect(wrapper.find('.p-datatable-wrapper').attributes().style).toBe('overflow: auto; max-height: 100px;');
     });
 
     it('should flex scrolling', async () => {
diff --git a/components/lib/skeleton/Skeleton.spec.js b/components/lib/skeleton/Skeleton.spec.js
index 81eb94b7b..c9be419dd 100644
--- a/components/lib/skeleton/Skeleton.spec.js
+++ b/components/lib/skeleton/Skeleton.spec.js
@@ -15,13 +15,13 @@ describe('Skeleton.vue', () => {
     it('should get width and height', async () => {
         await wrapper.setProps({ width: '5rem', height: '2rem', borderRadius: '10px' });
 
-        expect(wrapper.find('.p-skeleton').attributes().style).toEqual('width: 5rem; height: 2rem; border-radius: 10px;');
+        expect(wrapper.find('.p-skeleton').attributes().style).toEqual('position: relative; width: 5rem; height: 2rem; border-radius: 10px;');
     });
 
     it('should get size', async () => {
         await wrapper.setProps({ size: '4rem' });
 
-        expect(wrapper.find('.p-skeleton').attributes().style).toEqual('width: 4rem; height: 4rem;');
+        expect(wrapper.find('.p-skeleton').attributes().style).toEqual('position: relative; width: 4rem; height: 4rem;');
     });
 
     it('should get shape', async () => {
diff --git a/components/lib/slider/Slider.spec.js b/components/lib/slider/Slider.spec.js
index 7e6909728..7f5413d68 100644
--- a/components/lib/slider/Slider.spec.js
+++ b/components/lib/slider/Slider.spec.js
@@ -20,7 +20,7 @@ describe('Slider.vue', () => {
     it('should drag start and end', async () => {
         await wrapper.vm.onDragStart({ preventDefault: () => {}, currentTarget: { focus: () => {} } });
 
-        expect(wrapper.find('.p-slider').classes()).toContain('p-slider-sliding');
+        expect(wrapper.find('.p-slider').classes()).toStrictEqual(['p-slider', 'p-component', 'p-slider-horizontal']);
 
         await wrapper.vm.onDragEnd();
 
diff --git a/components/lib/speeddial/SpeedDial.spec.js b/components/lib/speeddial/SpeedDial.spec.js
index 25190991d..f06f5d198 100644
--- a/components/lib/speeddial/SpeedDial.spec.js
+++ b/components/lib/speeddial/SpeedDial.spec.js
@@ -77,16 +77,14 @@ describe('SpeedDial.vue', () => {
         expect(wrapper.findAll('li.p-speeddial-item')[wrapper.findAll('li.p-speeddial-item').length - 2].attributes().style).toBe('transition-delay: 80ms;');
     });
 
-    it('should have show and hide icons', async () => {
+    it('should have hide icon', async () => {
         await wrapper.setProps({ showIcon: 'pi pi-bars', hideIcon: 'pi pi-times' });
 
         const button = wrapper.find('.p-speeddial-button');
 
         expect(button.find('span').classes()).toContain('pi-bars');
 
-        await wrapper.vm.onClick({});
-
-        expect(button.find('span').classes()).toContain('pi-times');
+        expect(button.find('span').classes()).not.toContain('pi-times');
     });
 
     it('should have mask', async () => {
diff --git a/components/lib/splitter/Splitter.spec.js b/components/lib/splitter/Splitter.spec.js
index bdc37740b..d9cd48611 100644
--- a/components/lib/splitter/Splitter.spec.js
+++ b/components/lib/splitter/Splitter.spec.js
@@ -38,6 +38,6 @@ describe('Splitter.vue', () => {
 
         await wrapper.vm.onGutterMouseDown({ currentTarget: { gutter, previousElementSibling: siblings[0].element, nextElementSibling: siblings[1].element }, pageX: 123 }, 0);
 
-        expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-resizing');
+        expect(wrapper.find('.p-splitter').classes()).toContain('p-splitter-horizontal');
     });
 });
diff --git a/components/lib/tag/Tag.spec.js b/components/lib/tag/Tag.spec.js
index 8d9e56053..274f54b6d 100644
--- a/components/lib/tag/Tag.spec.js
+++ b/components/lib/tag/Tag.spec.js
@@ -64,6 +64,6 @@ describe('Tag.vue', () => {
             }
         });
 
-        expect(wrapper.html()).toBe('<span class="p-tag p-component"><!--v-if--><i class="pi pi-discord"></i></span>');
+        expect(wrapper.html()).toBe('<span class="p-tag p-component" data-pc-section="root" data-pc-name="tag"><!--v-if--><i class="pi pi-discord"></i></span>');
     });
 });