Dynamic Form Wizard For Vue.js


Vue-form-wizard is a Vue component with no external dependencies which simplifies tab wizard management and allows you to focus on the functional part of your app rather than wasting time on details.

Vue-form-wizard fiddle

Below you will find multiple links to different implementations of this wizard:

You can use these as a playground before implementing it into your projects.


To start working with vue-form-wizard use the following command to install it.

$ yarn add vue-form-wizard

Import it in your project along with its CSS

import VueFormWizard from 'vue-form-wizard'
import 'vue-form-wizard/dist/vue-form-wizard.min.css'

Component Usage:

<tab-content title="First Stage">
    <button>Show info</button>
<tab-content title="Search additional Info">
    <input type="text"
        placeholder="Search GitHub users"
 <tab-content title="Last step">
     You got what you wanted?

For your convenience, there are additional props listed in the documentation as well as slots & other options.

If you would like to explore more about Vue.js 2 wizard, head to the project's repository on GitHub, where you will also find a link to the documentation.