Step-by-step Wizard Component – wizard-steps

Install & Download:

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

Description:

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: