Simple Stepper Component For Vue 3 – Steppy

Steppy is a simple stepper component that helps users keep track of the progress they are making through a form, process, or sequence of steps.

How to use it:

1. Import the Steppy component.

import {Steppy} from 'vue3-steppy'

2. Add steps to the Steppy component.

<Steppo v-model:step="step">
  <template #1>
    <!-- Step 1 -->
  </template>
  <template #2>
    <!-- Step 2 -->
  </template>
  <template #3>
    <!-- Step 3 -->
  </template>
  ...
</Steppo>

3. Available component props.

step: {
  type: Number,
  default: 1,
},
tabs: {
  type: Array,
  default: reactive([
    {
      title: "Step 1",
      iconSuccess: null,
      isValid: true,
    },
    {
      title: "Step 2",
      iconSuccess: null,
      isValid: true,
    },
    {
      title: "Step 3",
      iconSuccess: null,
      isValid: true,
    },
  ]),
},
finalize: {
  type: Function,
  default: function () {
    return {};
  },
},
backText: {
  type: String,
  default: "Back",
},
nextText: {
  type: String,
  default: "Next",
},
doneText: {
  type: String,
  default: "Done",
},
primaryColor1: {
  type: String,
  default: "orange",
},
primaryColor2: {
  type: String,
  default: "#C5C5C5",
},

Preview:

Changelog:

v1.2.1 (09/03/2023)

• Add circle size adjustment

v1.1.0 (02/12/2023)

• Add loading spinner on done button

v1.0.2 (02/04/2023)

• Better CSS

Download Details:

Author: Laximas

Live Demo: https://laximas.github.io/vue3-steppy/

Download Link: https://github.com/Laximas/vue3-steppy/archive/refs/heads/main.zip

Official Website: https://github.com/Laximas/vue3-steppy

Install & Download:

# NPM
$ npm i vue3-steppy