vue3-steppy

Steppy

A customizable Stepper component for Vue 3

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

Demo

You can try a live demo here

Key Features

• Keep track of current step
• Change step content
• Configure finalization
• Show loading spinner
• Step descriptions/subtitles
• Clickable step navigation (linear / non-linear)
• Typescript support
• Customizable
  • Colors
  • Titles
  • Descriptions
  • Icons
  • Button text
  • Circle size
  • Content spacing

How To Use

Install

$ npm install vue3-steppy

Import

import {Steppy} from 'vue3-steppy'

Use it with v-model:step and put the content of each step in the slot with that step's number:

<template>
  <Steppy
    v-model:step="step"
    :tabs="tabs"
    :loading="loading"
    :finalize="finish"
  >
    <template #1>Content of the first step</template>
    <template #2>Content of the second step</template>
    <template #3>Content of the third step</template>
  </Steppy>
</template>

<script setup>
import { ref } from 'vue'
import { Steppy } from 'vue3-steppy'

const step = ref(1)
const loading = ref(false)

const tabs = ref([
  { title: 'Personal Info', description: 'Enter your details', isValid: true },
  { title: 'Account Setup', description: 'Configure your account', isValid: true },
  { title: 'Verification', description: 'Verify your email', isValid: true },
])

const finish = () => {
  loading.value = true
}
</script>

For a complete example, see the App.vue file in the repository.

Props

Events

Slots

Tab Object Structure

Each tab object in the tabs array should have the following properties:

Example Tab Object

{
  title: 'Personal Information',
  description: 'Enter your details',
  isValid: true,
  iconSuccess: null
}

Development

pnpm install
pnpm dev          # run the demo locally
pnpm test         # component tests in a real browser (Vitest browser mode + Playwright)
pnpm test:types   # type-check the public typings

The tests run in headless Chromium. Install it once with pnpm exec playwright install chromium. Use pnpm test:watch while working on the tests.

Dependencies

This software uses the following open source packages:

• Vue 3 (3.5+, a peer dependency: install it in your app)

Dev Dependencies

• Vite
• Typescript
• sass
• Eslint
• Prettier
• Vitest and Playwright
• CssInjectedByJs

Changelog

See CHANGELOG.md for the release history.

Contributing

Contributions are welcome. Please read CONTRIBUTING.md, the Code of Conduct and ACCESSIBILITY.md first. Security issues go through SECURITY.md, not public issues.

License

MIT

GitHub Laximas  ·