Step-by-step Wizard Component – wizard-steps

A lightweight and customizable step-by-step progress/wizard component for Vue.

How to use it:

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:  ['vue',  'script',  'com',  'example'],
        fillCount: 1
      },
    };
  }
}

3. Available component props.

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

Preview:

Download Details:

Author: frknbasaran

Live Demo: https://frknbasaran.github.io/vue-wizard-steps/

Download Link: https://github.com/frknbasaran/vue-wizard-steps/archive/refs/heads/master.zip

Official Website: https://github.com/frknbasaran/vue-wizard-steps

Install & Download:

# NPM
$ npm i vue-wizard-steps --save