Vue3 Form Wizard

A Vue 3 stepper with no runtime dependencies, for splitting a long form into steps people can actually finish.

Two ways to build

Declare steps as markup with <tab-content>, or as data with schema mode and v-model. Mix validation, conditions and shared state either way.

Dynamic steps

Add or remove steps with v-if at runtime. A step appears at its position in your markup, and removing one updates the nav, the progress bar and the count.

Validation that blocks

before-change runs when leaving a step and can return a boolean or a promise. Navigation waits, and the buttons disable themselves while it resolves.

Accessible by default

A real tablist/tab/tabpanel structure, arrow-key navigation between steps, and Enter or Space to activate. Steps you have not reached stay out of the tab order.

Router aware

Give a step a route and the URL follows the wizard. Deep links, the back button and shareable step URLs all work.

RTL ready

Flip the content with rtl, and the steps, progress bar and buttons too with reverse-horizontal. Arrow keys follow what you see.

As Easy as 1, 2, 3

npm install vue3-form-wizard

yarn add vue3-form-wizard

pnpm add vue3-form-wizard

Then register the component and include the stylesheet:

<script setup>
import { FormWizard, TabContent } from "vue3-form-wizard";
import "vue3-form-wizard/dist/style.css";
</script>

<template>
  <form-wizard @on-complete="onComplete">
    <tab-content title="Details">…</tab-content>
    <tab-content title="Review">…</tab-content>
  </form-wizard>
</template>

Head to Usage for the full walkthrough, or Playground to try it in the page.