Scoped

The Scoped component acts as a provider, allowing you to synchronize stepper state via useStepper across child components.

Basic Usage

import { defineStepper } from "@stepperize/vue";
 
export const Stepper = defineStepper(
  { id: "first", title: "First" },
  { id: "second", title: "Second" },
  { id: "last", title: "Last" }
);

Use Scoped only when child components need access to stepper state. Otherwise, use the composable directly in your component.

API Reference

Name	Type	Description	Required
initialStep	`string`	ID of the initial step to display.	No

Nested Scopes

You can nest multiple scopes for more complex stepper hierarchies:

<script setup lang="ts">
const GlobalStepper = defineStepper(
  { id: "start", title: "Start" },
  { id: "middle", title: "Middle" },
  { id: "end", title: "End" }
);
 
const LocalStepper = defineStepper(
  { id: "sub1", title: "Sub-step 1" },
  { id: "sub2", title: "Sub-step 2" }
 
);
 
// Use GlobalStepper.useStepper() for global scope
// Use LocalStepper.useStepper() for local scope
</script>
 
<template>
 
  <GlobalStepper.Scoped>
    <GlobalStepContent />
    <GlobalNavigation />
    <LocalStepper.Scoped>
      <LocalStepContent />
      <LocalNavigation />
    </LocalStepper.Scoped>
  </GlobalStepper.Scoped>
 
</template>

This structure allows for independent control of global and local stepper states.

Basic Usage

API Reference

Nested Scopes

On this page