Steps
Usage
Use the ::steps component together with ::step to display a sequence of content.
- Title and description will be displayed in the default slot with full markdown support.
- Supports linkable titles, Table of Content creation and Images and other components inside steps
Simple example with image:
Title of Step 1
This is the content of Step 1.
Title of Step 2
This is the content of Step 2.
Steps
Indicators Color
With the color property you can change the coloring of all step indicators.
Additionally it's also possible to change one specific indicator, see below.
- Default:
primary
Example: change all indicators to red
Title of Step 1
This is the content of Step 1.
Title of Step 1
This is the content of Step 1.
Line Style
Use the line property to change the styling of all step lines.
- Possible line types
line: dashed | dotted | solid - Default:
solid
Example:
Title of Step 1
This is the content of Step 1.
Title of Step 1
This is the content of Step 1.
Rounded Style
With the rounded property you can change the roundness of the increments for all steps.
- Possible rounded types
rounded: none | md | lg | xl | 2xl | full - Default:
full
Example:
Title of Step 1
This is the content of Step 1.
Title of Step 1
This is the content of Step 1.
Step
Indicator Color
With the color property you also have the possibility to change the color of a specifc indicator.
- Default:
primary
Example: change one indicator to purple
Title of Step 1
This is the content of Step 1.
Title of Step 1
This is the content of Step 1.
Icon
The icon property allows you to choose an icon as step indicator instead of the step count number.
Example:
Title of Step 1
This is the content of Step 1.
Title of Step 1
This is the content of Step 1.
Label
The label property allows you to add addtional text above your step title.
Example:
Table of Content
Due to the nesting and rendering of the steps component, step titles (e.g., H3 formatted with ### title) are not automatically included in the table of contents by default.
To include step titles in the table of contents, modify your nuxt.config.ts file,, setting searchDepth to at least 3:
export default defineNuxtConfig({
// ... other settings
content: {
markdown: {
toc: { depth: 2, searchDepth: 3 }
}
}
// ...
})