useStepper
Provides helpers for building a multi-step wizard interface.
Package: @vueuse/core
Category: Utilities
Usage
import { useStepper } from '@vueuse/core'
const {
steps,
stepNames,
index,
current,
next,
previous,
isFirst,
isLast,
goTo,
goToNext,
goToPrevious,
goBackTo,
isNext,
isPrevious,
isCurrent,
isBefore,
isAfter,
} = useStepper([
'billing-address',
'terms',
'payment',
])
// Access the step through `current`
console.log(current.value) // 'billing-address'Returns
| Name | Type |
|---|---|
| steps | Ref |
| stepNames | computed<any[]> |
| index | deepRef |
| current | computed |
| next | computed |
| previous | computed |
| isFirst | computed |
| isLast | computed |
| at | Ref |
| get | Ref |
| goTo | Ref |
| goToNext | Ref |
| goToPrevious | Ref |
| goBackTo | Ref |
| isNext | Ref |
| isPrevious | Ref |
| isCurrent | Ref |
| isBefore | Ref |
| isAfter | Ref |