Composable

The useStepper composable provides methods to interact with and render your stepper. It can be used with or without the Scoped component.

Usage

<script setup lang="ts">
import { defineStepper } from "@stepperize/vue"
 
const { useStepper } = defineStepper(
  { id: "first" },
  { id: "second" },
  { id: "last" },
)
 
const stepper = useStepper()
</script>

The when method allows rendering content conditionally based on the current step. It can take an id of a step (either a string or an array of a step ID followed by booleans) and a whenFn (the function to execute if the step matches). Additionally, you can provide an optional elseFn (the function to execute if the step does not match).

<script setup lang="ts">
import { defineStepper, StepperWhen } from '@stepperize/vue'
 
const stepper = useStepper()
</script>
 
<template>
 
  <StepperWhen :stepper when="first">
    <template #default="step">
      <p>First step: {{ step.title }}</p>
    </template>
  </StepperWhen>
 
  <StepperWhen :stepper when="second">
    <template #default="step">
      <p>Second step: {{ step.title }}</p>
    </template>
  </StepperWhen>
 
  <StepperWhen :stepper when="last">
    <template #default>
      Finished!
    </template>
    <template #else>
      Not finished yet
    </template>
  </StepperWhen>
 
</template>

You can define more complex conditions that not only depend on the current step's ID but also on additional boolean values. This allows for multi-condition logic where each boolean must evaluate to true for the step to match. The boolean values can represent different state conditions or external factors that affect the step's visibility or behavior.

The first element of the array is the step ID, the following elements are the boolean values.

<script setup lang="ts">
import { defineStepper, StepperWhen } from '@stepperize/vue'
 
const stepper = useStepper()
 
const condition1 = ... // boolean
const condition2 = ... // boolean
 
</script>
 
<template>
 
  <StepperWhen :stepper :when="['first', condition1, condition2]">
    <template #default="step">
      <p>First step: {{ step.title }}</p>
    </template>
  </StepperWhen>
 
</template>

switch

The switch method allows you to render content based on the current step's ID, similar to a switch-case structure. This method provides a cleaner and more scalable way to handle different step-specific rendering logic, making it ideal for scenarios where you need to differentiate the UI depending on the current step without writing multiple when conditions.

<script setup lang="ts">
import { defineStepper, StepperSwitch } from '@stepperize/vue'
 
const stepper = useStepper()
 
</script>
 
<template>
 
  <StepperSwitch :stepper>
    <template #first="step">
      <p>First: {{ step.title }}</p>
    </template>
    <template #second="step">
      <p>Second: {{ step.title }}</p>
    </template>
    <template #last>
      Finished!
    </template>
  </StepperSwitch>
 
</template>

match

The match method allows you to render content based on an external state, such as a value fetched from a server or any dynamic state in your application. This provides flexibility for rendering content that is tied not only to the current step in the stepper but also to any other state outside the stepper's context, such as user actions, data from an API, or global application state.

<script setup lang="ts">
import { defineStepper, StepperMatch } from '@stepperize/vue'
 
const stepper = useStepper()
 
const state = "Value from server or client state"
 
</script>
 
<template>
 
  <StepperMatch :stepper :state>
    <template #first="step">
      <p>First: {{ step.title }}</p>
    </template>
    <template #second="step">
      <p>Second: {{ step.title }}</p>
    </template>
    <template #last>
      Finished!
    </template>
  </StepperMatch>
 
</template>

match allows state-based control from client or server, useful for frameworks like Nuxt with server-side state management.

API Reference

Name	Type	Description
all	`Step[]`	Returns all steps
current	`Step`	Returns the current step
isLast	`boolean`	Returns true if the current step is the last step
isFirst	`boolean`	Returns true if the current step is the first step
next	`() => void`	Advances to the next step
prev	`() => void`	Returns to the previous step
get	`(id: string) => Step`	Returns a step by its ID
goTo	`(id: string) => void`	Navigates to a specific step by its ID
reset	`() => void`	Resets the stepper to its initial state
when	`(id: string, whenFn: (step: Step) => VNodeChild, elseFn?: (step: Step) => VNodeChild) => VNodeChild`	Executes a function based on the current step ID
switch	`(steps: { [id: string]: (step: Step) => VNodeChild }) => VNodeChild`	Executes a function based on a switch-case-like structure for steps
match	`(state: string, steps: { [id: string]: (step: Step) => VNodeChild }) => VNodeChild`	Matches the current state with a set of possible states and executes the corresponding function

Usage

Rendering Methods

when

switch

match

API Reference

On this page