Checkout
CheckoutStepper
Multi-step checkout progress indicator wrapping Nuxt UI's UStepper.
CheckoutStepper
A multi-step progress indicator for checkout flows. Wraps Nuxt UI's UStepper with ecommerce-specific defaults and step configuration.
Preview
Shipping
Payment
Review
Step 0 of 0
Usage
<script setup>
const currentStep = ref(0)
const steps = [
{ id: 'shipping', title: 'Shipping', icon: 'i-heroicons-truck' },
{ id: 'payment', title: 'Payment', icon: 'i-heroicons-credit-card' },
{ id: 'review', title: 'Review', icon: 'i-heroicons-clipboard-document-check' },
]
</script>
<CCheckoutStepper v-model="currentStep" :steps="steps" />
Vertical Orientation
<CCheckoutStepper v-model="currentStep" :steps="steps" orientation="vertical" />
Non-Linear
<CCheckoutStepper v-model="currentStep" :steps="steps" :linear="false" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
steps | CheckoutStep[] | required | Step configuration |
modelValue | number | 0 | Active step (0-indexed) |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Layout direction |
linear | boolean | true | Must complete steps in order |
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
color | 'primary' | 'secondary' | 'success' | 'neutral' | 'primary' | Color theme |
ui | Partial<{...}> | — | Per-instance theme overrides |
CheckoutStep Interface
interface CheckoutStep {
id: string
title: string
description?: string
icon?: string
}
Events
| Event | Payload | Description |
|---|---|---|
update:modelValue | number | Active step changed |
Slots
| Slot | Scoped Props | Description |
|---|---|---|
default | { steps, active } | Completely custom stepper rendering |