Blog Detail

8

Oct
Vue-step-wizard -  A Simple Vue Js Step/Form Wizard Plugin cover image

Vue-step-wizard - A Simple Vue Js Step/Form Wizard Plugin

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.

Published at : 08-10-2021

Author : Rizwan Aslam
AUTHOR
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

web application development client
web application development client
web application development client
web application development client
web application development client

Launch project