A Lightweight step-by-step progress/wizard component for Vue

by Vue.js Examples

vue-wizard-steps

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

View Demo View Github

Step 1: Installation

yarn add vue-wizard-steps

Step 2: Add to project

import  Vue  from  'vue';
import  WizardSteps  from  'vue-wizard-steps';
import  App  from  './App.vue';

Vue.component("wizard-steps", WizardSteps);

new  Vue({
    render: h => h(App),
}).$mount('#app');

Step 3: Use component in view

<template>
	<wizard-steps :sections="sections" :bgColor="bgColor" :fillColor="fillColor" />
</template>

<script>
export default {
data() {
	return {
		sections: {
			titles:  ['summary',  'shipping',  'payment',  'checkout'],
			fillCount: 2
		},
		bgColor: '#E4F5B8',
		fillColor: '#1F01B9'
	};
}
}
</script>

That's all.

Props

Prop name Type Description Required
sections Object Object that contains progress bar settings yes
sections.titles Array String array that represents step titles yes
sections.fillCount Number Filled step count yes
bgColor String Background color of progress bar as hexadecimal no
fillColor String Color of filled bars on progress as hexadecimal no