Steps
Create numbered step-by-step guides and tutorials
Steps
A component for creating numbered step-by-step guides, tutorials, and instructional content.
Usage
Wrap your steps content in ::steps and use h3 headings (###) for each step:
::steps
### Install dependencies
Run the install command to set up the project.
### Configure your application
Update your configuration file with the required settings.
### Start developing
Run the development server and start building.
::
Install dependencies
Run the install command to set up the project.
Configure your application
Update your configuration file with the required settings.
Start developing
Run the development server and start building.
With Code Blocks
Steps work well with code examples:
::steps
### Install the package
\`\`\`bash
npm install docs-please
\`\`\`
### Add to your Nuxt config
\`\`\`ts
export default defineNuxtConfig({
extends: ['docs-please'],
})
\`\`\`
### Start development
\`\`\`bash
npm run dev
\`\`\`
::
Install the package
Add to your Nuxt config
export default defineNuxtConfig({
extends: ['docs-please'],
})
Start development
Using Step Component
For more control, you can use the ::step component explicitly:
::steps
::step
### First Step
Content for the first step.
::
::step
### Second Step
Content for the second step.
::
::
Styling
The steps component uses CSS counters for automatic numbering. Each h3 heading within the steps container will be styled with a step number indicator.