@doderasoftware/vue-stepper
Advanced tools
A headless, accessible, and fully customizable multi-step stepper component for Vue 3. Build complex forms, wizards, and onboarding flows with ease. Features TypeScript support, responsive mobile design, step validation, optional steps, progress tracking,
A headless, accessible, and fully customizable multi-step stepper component for Vue 3. Build complex forms, wizards, and onboarding flows with ease.
📖 Documentation | 📦 npm | 🐛 Issues
:ui prop systemnpm install @doderasoftware/vue-stepper
That's it! Styles are automatically included - no additional CSS imports needed.
<template>
<Stepper
v-model="currentStep"
:steps="steps"
:can-go-next="canProceed"
sidebar-title="Registration"
@complete="handleComplete"
>
<template #default="{ currentStep: stepIndex }">
<PersonalInfo v-if="stepIndex === 0" v-model="formData.personal" />
<AccountDetails v-else-if="stepIndex === 1" v-model="formData.account" />
<Review v-else-if="stepIndex === 2" :data="formData" />
</template>
</Stepper>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { Stepper } from '@doderasoftware/vue-stepper'
const currentStep = ref(0)
const formData = ref({ personal: {}, account: {} })
const steps = [
{ category: 'Step 1', title: 'Personal Info', description: 'Enter your personal details' },
{ category: 'Step 2', title: 'Account Details', optional: true },
{ category: 'Step 3', title: 'Review & Submit' },
]
const canProceed = computed(() => {
if (currentStep.value === 0) {
return !!formData.value.personal.email
}
return true
})
function handleComplete() {
console.log('Form submitted:', formData.value)
}
</script>
The component includes full dark mode support out of the box. It uses class-based dark mode - add the dark class to your <html> or <body> element to enable dark styles.
<!-- Enable dark mode via class on html/body -->
<html class="dark">
...
</html>
This approach is compatible with most dark mode implementations (Tailwind, manual toggle, etc.).
The :ui prop allows complete control over every element's styling. Pass class names to override the defaults:
<template>
<Stepper
v-model="currentStep"
:steps="steps"
:ui="{
root: 'my-stepper',
sidebar: 'bg-indigo-50 border-indigo-200',
navItemCurrent: 'bg-indigo-600 text-white',
indicatorCompleted: 'bg-indigo-600',
buttonPrimary: 'bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700',
progressFill: 'bg-indigo-600',
}"
>
<!-- your content -->
</Stepper>
</template>
| Key | Description |
|---|---|
root | Root container |
sidebar | Desktop sidebar container |
sidebarContent | Sidebar inner content |
sidebarTitle | Sidebar title text |
nav | Navigation container |
navItem | Step button - base |
navItemCurrent | Step button - current |
navItemCompleted | Step button - completed |
navItemDisabled | Step button - disabled |
indicator | Step indicator - base |
indicatorCurrent | Step indicator - current |
indicatorCompleted | Step indicator - completed |
indicatorDisabled | Step indicator - disabled |
stepCategory | Step category text |
stepTitle | Step title text |
progressBar | Progress bar track |
progressFill | Progress bar fill |
main | Main content area |
card | Content card |
navigation | Navigation buttons container |
button | Button base |
buttonPrimary | Primary button (next/complete) |
buttonSecondary | Secondary button (back) |
buttonDisabled | Disabled button state |
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | 0 | Current step index (v-model) |
steps | StepConfig[] | required | Array of step configurations |
ui | StepperUI | {} | UI customization object |
sidebarTitle | string | 'Steps' | Title displayed above the sidebar |
canGoNext | boolean | true | Whether user can proceed to next step |
nextButtonText | string | 'Continue' | Text for the next button |
backButtonText | string | 'Back' | Text for the back button |
completeButtonText | string | 'Complete' | Text for the final step button |
showNavigation | boolean | true | Show/hide navigation buttons |
showProgress | boolean | true | Show/hide progress indicator |
showMobileHeader | boolean | true | Show/hide mobile header |
showSidebar | boolean | true | Show/hide desktop sidebar |
linear | boolean | true | Restrict navigation to sequential steps only |
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Emitted when step index changes |
step-change | { from: number, to: number } | Emitted on step navigation |
next | StepChangeEvent | Emitted when next button is clicked |
back | StepChangeEvent | Emitted when back button is clicked |
complete | void | Emitted when completing the last step |
| Slot | Props | Description |
|---|---|---|
default | { currentStep, currentStepConfig, goNext, goBack, ... } | Main content area |
header | - | Content above the step container |
title | - | Title area inside step container |
sidebar-header | - | Custom sidebar header |
sidebar-footer | - | Custom sidebar footer |
step-indicator | { step, index, isCurrent, isCompleted, isDisabled } | Custom step indicator |
back-icon | - | Custom back button icon |
next-icon | - | Custom next button icon |
interface StepConfig {
id?: string | number
category: string
title: string
disabled?: boolean
optional?: boolean
}
Use the useMultiStep composable for headless control:
import { useMultiStep } from '@doderasoftware/vue-stepper'
const {
currentStep,
isFirstStep,
isLastStep,
progress,
goNext,
goBack,
goToStep,
isStepCompleted,
reset,
} = useMultiStep({
steps: mySteps,
initialStep: 0,
linear: true,
onStepChange: ({ from, to }) => console.log(`Step changed from ${from} to ${to}`),
})
MIT © Dodera Software SRL
FAQs
A headless, accessible, and fully customizable multi-step stepper component for Vue 3. Build complex forms, wizards, and onboarding flows with ease. Features TypeScript support, responsive mobile design, step validation, optional steps, progress tracking,
We found that @doderasoftware/vue-stepper demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.
Security News
Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.
Security News
OpenSSF has issued a high-severity advisory warning open source developers of an active Slack-based campaign using impersonation to deliver malware.