Customizable Step-by-Step Progress/Wizard Component for Vue

Wizard steps is a lightweight and customizable step-by-step progress/wizard component for Vue.

How to make use of it:

Install and download:

$ npm i vue-wizard-steps --save

1. Import and register the component.

import WizardSteps from 'vue-wizard-steps';
Vue.component("wizard-steps", WizardSteps);

2. Add the wizard component to the template.

<wizard-steps :sections="sections" />
export default {
  data() {
    return {
      sections: {
        titles:  ['',  '',  '',  ''],
        fillCount: 1

3. Component props available.

props: {
  sections: Object,
  bgColor: String,
  fillColor: String


Prop nameTypeDescriptionRequired
sectionsObjectAn object that contains progress bar settingsyes
sections.titlesArrayString array that represents step titlesyes
sections.fillCountNumberFilled step countyes
bgColorStringThe background color of the progress bar is hexadecimalno
fillColorStringColor of filled bars on progress as hexadecimalno

Step-by-step Wizard Component, vue wizard steps Plugin/Github


Bootstrap Inspired Step-by-step Wizard Modal Plugin | jQuery FlowDialog
Framework for Progress Forms Steps | jQuery-Form-Slider

See Demo And Download

Official Website(frknbasaran): Click Here

This superior jQuery/javascript plugin is developed by frknbasaran. For extra Advanced Usage, please go to the official website.