Easy Step Indicator In Vue.js

Install & Download:

# NPM
$ npm install vue-step-indicator --save

Description:

An easy yet configurable step indicator for Vue.js applications.

Useful for step-by-step form wizard that indicates on which step you’re viewing.

How to use it:

1. Install and import the component.

import StepIndicator from 'vue-step-indicator';
import './src/style.css';

2. Register the component.

export default {
  components: {
    StepIndicator
  }
}

3. Create a basic step indicator in your template and specify the current step & total amount of steps.

<template>
  <step-indicator :current="1" :total="5"></step-indicator>
</template>

4. Customize the step colors using the following props.

• currentColor: The color of the current steop, default: ‘rgb(68, 0, 204)’.
• defaultColor: Default: ‘rgb(130, 140, 153)’.

5. Execute a function when a step is clicked.

handleClick: () => {}