Vue3 Steps

Vue3 Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Steps from 'primevue/steps';

MenuModel

Steps uses the common MenuModel API to define the items, visit MenuModel API for details.

Getting Started

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'
            }]
        }
    }
}

Interactive

Items are readonly by default, if you'd like to make them interactive then disable readonly property.

<Steps :model="items" :readonly="false" />
<router-view />

Theming

Steps supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Steps showcase for demos and documentation.