Components

Vertical stepper

Display a vertical sequence of steps with optional labels and content, useful for process flows and form wizards.

TabStepper

CircleStepper

VerticalStepper

StepIndicator

Component

View code

Show playground

Step 1: Setup

Start with Nuxt

Initialize your project using Nuxt 3 to build a performant and scalable Vue application.

Step 2: Styling

Style with Tailwind

Integrate Tailwind CSS to style your application using utility-first classes and responsive design.

Step 3: Integration

Combine the Power

Use Nuxt and Tailwind together to rapidly build modern, fully styled full-stack applications.

Props

Props	Default	Type
`items`	—	`VerticalStepperItem[]`
`stepType`	`StepIndicatorType.NUMBER`	`StepIndicatorType`
`stepSize`	`StepIndicatorSize.SM`	`StepIndicatorSize`
`stepCompletedIcon`	`mdi:check`	`string`
`hasStepper`	`true`	`boolean`
`hasStepperGap`	`true`	`boolean`
`showLine`	`true`	`boolean`
`isStepInteractive`	`false`	`boolean`

Usage

items

The items prop is an array of VerticalStepperItem objects that define the steps of the stepper.

 <template>
    <VerticalStepper :items />
</template>
<script setup lang="ts">
const items: VerticalStepperItem[] = [
    {
        title: "Start with Nuxt",
        metaTitle: "Step 1: Setup",
        description: "Initialize your project using Nuxt 3 to build a performant and scalable Vue application.",
        stepStatus: "none",
        stepIcon: "mdi:rocket-launch",
    },
    {
        title: "Style with Tailwind",
        metaTitle: "Step 2: Styling",
        description: "Integrate Tailwind CSS to style your application using utility-first classes and responsive design.",
        stepStatus: "none",
        stepIcon: "mdi:brush",
    },
    {
        title: "Combine the Power",
        metaTitle: "Step 3: Integration",
        description: "Use Nuxt and Tailwind together to
        rapidly build modern, fully styled full-stack applications.",
        stepStatus: "none",
        stepIcon: "mdi:power-plug",
    },
]
</script>

Type: VerticalStepperItem[]
Default: An example array

TypeScript interface

 interface VerticalStepperItem {
    title: string
    metaTitle?: string
    description: string
    stepStatus?: StepStatus
    stepIcon?: any
}

stepType

Sets the type of the step indicator. Uses the StepIndicatorType enum.

 <template>
    <VerticalStepper :stepType="StepIndicatorType.ICON" />
</template>

Type: StepIndicatorType
Default: StepIndicatorType.NUMBER

Options

Value	Description
`NUMBER`	Uses a numbered step indicator
`EMPTY`	Dont show any item inside the step indicator
`ICON`	Displays the icon passed from the stepIcon object key.

stepSize

Sets the size of the step indicator. Uses the StepIndicatorSize enum.

 <template>
    <VerticalStepper :stepSize="StepIndicatorSize.SM" />
</template>

Type: StepIndicatorSize
Default: StepIndicatorSize.SM

Options

Value	Description
`XL`	Large
`LG`	Large
`MD`	Medium
`SM`	Small
`XS`	Extra small

stepCompletedIcon

Sets the icon to be displayed when the step is completed.

 <template>
    <VerticalStepper stepCompletedIcon="mdi:check" />
</template>

hasStepper

Sets whether the stepper is displayed or not.

 <template>
    <VerticalStepper :hasStepper="false" />
</template>

Type: boolean
Default: true

hasStepperGap

Sets whether the gap between the step indicator and the vertical is displayed or not.

 <template>
    <VerticalStepper :hasStepperGap="false" />
</template>

Type: boolean
Default: true

showLine

Sets whether the vertical line between the steps is displayed or not.

 <template>
    <VerticalStepper :showLine="false" />
</template>

Type: boolean
Default: true

isStepInteractive

Sets whether the steps indicator should use or not.

 <template>
    <VerticalStepper :isStepInteractive="false" />
</template>

Type: boolean
Default: false

Slots

Name	Description
`default`	Can be used as an alternative to the items props to loop through the steps. Useful to harness the <VerticalStep> slot and render custom content instead of the step description.

 <template>
    <VerticalStepper>
        <VerticalStep
            v-if="item in items"
            :key="item.title"
            :step
            :title="item.title"
            :description="item.description
        />
    </VerticalStepper>
</template>
<script setup lang="ts">
const items: VerticalStepperItem[] = [
    ...
]
</script>

VerticalStep

Represents the single vertical step.

View code

Show playground

Step 1

Step title

Description

Props

Props	Default	Type
`title`	`Step title`	`string`
`metaTitle`	—	`string`
`description`	—	`string`
`step`	`1`	`number`
`stepType`	`StepIndicatorType.NUMBER`	`StepIndicatorType`
`stepStatus`	`StepStatus.NONE`	`StepStatus`
`stepSize`	`StepIndicatorSize.SM`	`StepIndicatorSize`
`stepIcon`	—	`string`
`stepCompletedIcon`	—	`string`
`isLast`	`false`	`boolean`
`hasStepper`	`true`	`boolean`
`hasStepperGap`	`true`	`boolean`
`showLine`	`true`	`boolean`
`isHovered`	—	`boolean`

Shared props

The <VerticalStep> component uses almost the same props as the parent wrapper except for a few different props.

isLast

If the step is set as the last step, this item will not display the vertical line.

 <template>
    <VerticalStep isLast />
</template>

Type: boolean
Default: false

isHovered

Sets the hover state for the current step indicator.

 <template>
    <VerticalStep isHovered />
</template>

Type: boolean
Default: false

Item slots

Name	Description
`default`	Used to render custom content instead of the description.

 <template>
    <VerticalStep
        title="Sample title"
    >
        <!-- Custom step content -->
    </VerticalStep>
</template>