Playground
Live, editable examples. Everything on this page runs the real component in your browser — no sandbox to load, nothing to install.
For the full catalogue of variations see Demos.
Basic wizard
Three steps, default styling. Use the Next and Back buttons, or focus a step circle and move with ← / →, then activate it with Enter or Space.
Validation before each step
before-change runs when leaving a step. Return false to block navigation, or a promise for async checks — the buttons disable themselves while it resolves.
Schema mode
Steps declared as data rather than markup, with shared state through v-model.
Conditional steps
A step whose condition returns false disappears from the wizard, and the step numbering and progress bar adjust to match.
Right to left
rtl flips the content; add reverse-horizontal to run the steps, progress bar and buttons right to left too.
Full application example
A complete project with routing, built on CodeSandbox.