Vue-step-wizard is a simple Vue Js step/form wizard plugin launched by Bekzodbekxon. It is a straightforward Form Wizard Plugin with elegant UI. Vue Step Wizard uses the Vuelidate plugin under the hood to perform form validations. Building a multistep form with validation is a breeze you just need to make sure the data property matches a couple of syntaxes and along with that, you need to include a mixin named ValidationHelper.

Installation

NPM

You can install this package via Npm:

npm install --save vue-step-wizard

Via CDN

You can also use CDN instead of installation.

<link rel="stylesheet" href="https://unpkg.com/vue-step-wizard/dist/vue-step-wizard.css">
<script src="https://unpkg.com/vue-step-wizard/dist/vue-step-wizard.js"></script>

Component Registration

Global

//global registration
import VueStepWizard from 'vue-step-wizard'
import 'vue-step-wizard/dist/vue-step-wizard.css'
Vue.use(VueStepWizard);

Local

//local registration
import {FormWizard, TabContent} from 'vue-step-wizard'
import 'vue-step-wizard/dist/vue-step-wizard.css'
//component code
components: {
  FormWizard,
  TabContent
}

Usage

Basic Stepper Template

    <form-wizard>
        <tab-content title="About You" :selected="true">
            This is content of Tab 1
        </tab-content>
        <tab-content title="About your Company"> 
            <p>Can contains</p>
            <p>Multiple Elements</p>
        </tab-content>
        <tab-content title="Finishing Up">
            <p>Or an image .. or any thing</p>
            <img src="../assets/dog.png" alt="Simple" />
        </tab-content>  
    </form-wizard>

Form Stepper

It’s the same as building a stepper, you just need to decide which form fields goes into which tab-content component and bind it with your vue model attribute.

<template>
    <form-wizard>
        <tab-content title="About You" :selected="true">
            <div class="form-group">
                <label for="fullName">Full Name</label>
                <input type="text" class="form-control" placeholder="Enter your name" v-model="fullName">
            </div>
        </tab-content>
        <tab-content title="About your Company"> 
            <div class="form-group">
                <label for="companyName">Your Company Name</label>
                <input type="text" class="form-control" placeholder="Enter your Company / Organization name" v-model="companyName">
            </div>
        </tab-content>
        <tab-content title="Finishing Up">
            <div class="form-group">
                <label for="referral">From Where did you hear about us</label>
                <select class="form-control" v-model="referral">
                    <option>Newspaper</option>
                    <option>Online Ad</option>
                    <option>Friend</option>
                    <option>Other</option>
                </select>
            </div>
        </tab-content>
    </form-wizard>
</template>

<script>
import {FormWizard, TabContent} from 'vue-step-wizard'
import "vue-step-wizard/dist/vue-step-wizard.css";


export default {
    name: 'BasicStepperForm',
    components: {
        FormWizard, TabContent
    },
    data(){
        return {
            fullName: '',
            companyName: '',
            referral: '',
        }
    },
}
</script>

Events

Form Submit

You can utilize the onComplete event on the form-wizard component to execute the custom code on form submission.

    <form-wizard @onComplete="submit">

Next and Previous Step

    <form-wizard @onNextStep="nextStep" @onPreviousStep="previousStep">

I hope this guide will help you in utilizing this plugin in your application but there is a lot more about this plugin. If you wanted to dig more about it, then you should view its whole documentation here.