bastidest/vue-step-progress

A simple Vue component that displays a Progress Bar with labels for each step

Vue Step Progress Bar

Demo

Installation

Install the plugin with npm:

# Vue 3.x
npm install --save vue-step-progress

# Vue 2.x
npm install --save vue-step-progress@0

Usage

⚠️ The default settings use Font Awesome for the checkmark icon. You can change the css icon class by using the 'icon-class' prop.

Add the Library import in the components you want to use the progress bar in:

import StepProgress from 'vue-step-progress';

// import the css (OPTIONAL - you can provide your own design)
import 'vue-step-progress/dist/main.css';

// ...
// register the component in your Vue instance
  components: {
    'step-progress': StepProgress
  },
// ...

Put the step-progress element into your HTML where you want the Component to appear and pass the steps Array Prop and the current-step Number prop.

<div>
  <step-progress :steps="mySteps" :current-step="currentStep" icon-class="fa fa-check"></step-progress>
</div>

Props

steps

A string array of all steps to be displayed. The Strings will be present as labels in the component. Example:

['Step 1', 'Step 2', 'Step 3']

current-step

A simple Number prop that defines the index of the active step. Example:

2

icon-class

Optional

The css class of the checkmark icon. Default:

fa fa-check

active-color

Optional

A String prop that defines the active step color. It is red by default. Example:

blue

passive-color

Optional

A String prop that defines the passive step color. It is gray by default. Example:

black

active-thickness

Optional

A Number prop that defines the active step thickness. It is 5 by default. Example:

10

passive-thickness

Optional

A Number prop that defines the passive step thickness. It is 5 by default. Example:

10

line-thickness

Optional

A Number prop that defines the line thickness. It is 12 by default. Example:

10

Development

It is recommended to develop and build inside a docker container. start.sh is a convenience script to help you with that. To start a development server, execute:

./start.sh dev-container

This will setup a new docker container, install npm dependencies and start the development server under http://localhost:3000

Document all user-visible changes in the "Unreleased" section in CHANGELOG.MD.

Publishing (maintainer only)

Create a the .npmrc file:

//registry.npmjs.org/:_authToken=<token>

Update package.json version, create tag, create changelog, push, npm publish:

./start.sh publish

vue-step-progress's Issues

Properly set `package.json` attributes for UMD and ES

Guide: https://2ality.com/2017/04/setting-up-multi-platform-packages.html

Not working with Typescript

Could not find a declaration file for module 'vue-step-progress'
Try npm install @types/vue-step-progress if it exists or add a new declaration (.d.ts) file containing declare module 'vue-step-progress';

Add CSS class for current step

As of now, there are only two states for a step, either valid (for past and current step) or active (for future step).
I would need a third CSS class for the current step in order to style it differently.
Could you change this? Would be great! I tried to do it with CSS selector ":last-of-kind", but can't make it work.

Could not resolve "Vue" on deploy (linux or any case sensitive operational systems.

Hello, first i need to thank you for this package.
I'm using your package but I'm having some problems when I go up to production!
I'm using it on nuxt3 and on my notebook (macbook air m1) it works fine, but in production it generates an error!
From what I've seen it's because of the case sensitive, 'Vue' needs to be 'vue', for linux servers.
you can see the problem here: https://stackblitz.com/edit/github-j7fk9f?file=package.json

Unfortunately this broke on my production server so my system went down, can you adjust this and release a release? thank you very much in advance.

Steps not rendering in Production build

When I pulled this new release in (v1.0.0) the steps are not rendering. Getting error Invalid VNode type: Symbol() (symbol) . By the looks of it this means there are multiple instances of Vue are being pulled in. However when developing this release it had no issue rendering in dev.

Icon doesn't show

I have used the lib in a laravel 5.7 project and when I go to the next step, tick icon doesn't show

Navigate by clicking step number

Hi, thank you for plugin.

Is there any way I can click on step number to navigate? Users should be able to see any step they want and not in sequence.

How to change small size for step circle ?

SSR not working with Nuxt: Self is not defined

I get the error displayed above for the code I have below

<template>
	<div class="body">
		<step-progress :steps="steps" :current-step="currentStep">
		</step-progress>
	</div>
</template>

<script>
import StepProgress from "vue-step-progress";
import "vue-step-progress/dist/main.css";
export default {
	components: {
		"step-progress": StepProgress,
	},
	data: function () {
		return {
			steps: ["Step 1", "Step 2", "Step 3"],
			currentStep: 1,
		};
	},
};
</script>

Support for Vue 3.x

Any plans to add Support for Vue 3.x?

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance.

How can i add button?

How can i add button for next step?