Dynamic Form Wizard For Vue.js

vue-form-wizard

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:

• Squared steps
• Tabbed steps
• Step index Start at any step. Note: start-index is zero-based and the count starts at 0
• Custom button and title text
• Custom title slot
• Customized buttons with slots Replace stuff you don't like
• Call a function before tab switch
• Complete form example integrated with vue-form-generator
• Element UI form integration
• Vue router integration You can place a router-view inside the wizard and have a separate page per tab. A route prop must be passed to the tabs you want to handle certain tabs
• Async validation with error message before-change prop can accept a promise that is resolved with true which will execute the promise before switching to another step/tab (NOTE: This feature is not present in the npm package yet)

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

Example

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'
Vue.use(VueFormWizard)

Component Usage:

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

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.