Steps docs for router

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>`

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({});

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>

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">

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',