Basic

---

• Choose a recipe
• Make a list of the ingredients
• Take the ingredients
• Prepare the dish following the recipe’s instructions
• Enjoy the dish!

Code

<script setup>
import Timeline from 'v-tmline';

const timelineItems = [
	{
		id: 1,
		label: "Choose a recipe",
	},
	{
		id: 2,
		label: "Make a list of the ingredients",
	},
	{
		id: 3,
		label: "Take the ingredients",
	},
	{
		id: 4,
		label: "Prepare the dish following the recipe’s instructions",
	},
	{
		id: 5,
		label: "Enjoy the dish!",
	},
]
</script>

<template>
	<Timeline :items="timelineItems" />
</template>

INFO

The id is optional while the label is required.

isDark here is just an utility to make the style dynamic based on the theme of the site.

TIP

Make sure to add the mode. The default is light and it can be set also as dark. It can be dynamic depending on the theme settings.