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


Step-by-step Wizard Component - wizard-steps

Download Details:

Author: frknbasaran

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-wizard-steps --save

Add Comment