import Steps from 'primevue/steps';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/steps/steps.min.js"></script>
Steps uses the common MenuModel API to define the items, visit
Steps is integrated with Vue Router and requires a collection of menuitems as its model.
<Steps :model="items" />
<router-view />
export default {
data() {
return {
items: [{
label: 'Personal',
to: '/steps'
},
{
label: 'Seat',
to: '/steps/seat'
},
{
label: 'Payment',
to: '/steps/payment'
},
{
label: 'Confirmation',
to: '/steps/confirmation'
}]
}
}
}
Items are readonly by default, if you'd like to make them interactive then disable readonly property.
<Steps :model="items" :readonly="false" />
<router-view />
Steps offers content customization with the item template that receives the menuitem instance from the model as a parameter.
<Steps :model="items">
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
</Steps>
nuxt-link with route configuration can also be used within templating for further customization.
<Steps :model="items">
<template #item="{item}">
<nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact": isExactActive}>{{route.fullPath}}</a>
</nuxt-link>
</template>
</Steps>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| id | string | null | Unique identifier of the element. |
| model | array | null | An array of menuitems. |
| readonly | boolean | true | Whether the items are clickable or not. |
| exact | boolean | true | Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-steps | Container element. |
| p-steps-item | Menuitem element. |
| p-steps-number | Number of menuitem. |
| p-steps-title | Label of menuitem. |
None.