Steppy

A customizable Stepper component for Vue 3

Demo • Key Features • How To Use • Dependencies • License

Demo

You can try a live demo here

Key Features

• Keep track of current step
• Change step content
• Configure finalization
• Show loading spinner
• Typescript support
• Customizable
  • Colors
  • Titles
  • Icons
  • Button text
  • Circle size

How To Use

Install

$ npm install vue3-steppy

Import

import {Steppy} from 'vue3-steppy'

For an implementation example, see the App.vue file in the repository.

Props

Prop	Type	Default	Description
step	Number	1	The current step number.
tabs	Array	[]	Array of step objects with titles and flags for validity and success icons.
finalize	Function	() => {}	Function to call when the final step is completed.
backText	String	"Back"	Text displayed on the back button.
nextText	String	"Next"	Text displayed on the next button.
doneText	String	"Done"	Text displayed on the done button.
loading	Boolean	false	Indicates whether the final step is in a loading state.
primaryColor1	String	"orange"	Primary color for the stepper's theme.
primaryColor2	String	"#fff"	Secondary color for the stepper's theme.
backgroundColor	String	"#fff"	Background color for the stepper.
circleSize	Number	68	Size of the circles in the step indicators.

Dependencies

This software uses the following open source packages:

• Vue 3

Dev Dependencies

• Vite
• Typescript
• sass
• Eslint
• Prettier
• gh-pages
• CssInjectedByJs

License

MIT

---

GitHub Laximas  ·