Define
How to define a stepper using defineStepper
defineStepper
is the core function for creating a customizable stepper. It generates the necessary components and composables for building your stepper UI and managing its state.
Usage
Import
import { defineStepper } from "@stepperize/vue";
Define steps
Call defineStepper
with your step configurations:
import { defineStepper } from "@stepperize/vue";
const { Scoped, useStepper, steps } = defineStepper(
{ id: "step-1", title: "Step 1", description: "First step" },
{ id: "step-2", title: "Step 2", description: "Second step" },
{ id: "step-3", title: "Step 3", description: "Third step" }
);
id
(required): Unique identifier for each step- Add any custom properties (e.g.,
title
,description
) for use in your UI
Return Value
defineStepper
returns an object with:
Scoped
: A Provider component for scoping stepper stateuseStepper
: A custom composable for accessing and controlling the steppersteps
: An array of the defined step objectsutils
: Pure utility functions for working with steps
Next Steps
Learn how to use the returned components and composables:
Edit on GitHub
Last updated on