Spotlight

steps is the tour, in order. Each entry is a target CSS selector naming the element to highlight, a title and description for the card, and an optional placement when the card would otherwise land somewhere awkward. The selector is resolved when the step becomes active, so the element only has to exist by then — not when the tour is mounted.

modelValue is the index of the active step. Pass it to drive the tour from your own state — jumping to the step that matches a route, or holding a step until something finishes loading — and bind it with v-model so the Next and Back buttons still move it.

defaultValue is the step the tour opens on while it still manages its own index. It's how you resume a walkthrough someone abandoned halfway, without having to hold the index yourself for the rest of the tour.

open is whether the tour is running. Almost every tour is triggered by something — a button, a first visit, a new feature flag — so this is normally bound with v-model:open, which also lets the tour close itself when it finishes or is skipped.

defaultOpen starts the tour as soon as it mounts, with no trigger and no state of your own. Pair it with a v-if on something you actually want to gate on — a first-visit flag — since a tour that runs on every mount dims the page for everybody, every time. The button below mounts the tour rather than opening it, which is what that pattern looks like.

color themes the highlight ring around the target and the step card's primary button. Primary is the default and right for most walkthroughs; the others are worth reaching for when the tour is about something with its own established colour, like a warning or a new feature.

padding is the gap in pixels between the target's own edge and the highlight ring, eight by default. Widen it when the target has visual weight right up to its border — a card, an image — where a tight ring reads as a mistake rather than a highlight.

dismissible is whether Escape, a click on the dimmed backdrop and the Skip button all end the tour early. It's on by default. Turning it off makes the tour something the reader has to walk through — justified for a mandatory setup flow, and irritating for anything they've seen before, so use it sparingly.

nextLabel is the text on the forward button for every step except the last. Change it where “Next” undersells what the button does — “Show me” on a tour that demonstrates as it goes reads better than a page-turn.

backLabel is the text on the button that returns to the previous step. It's hidden on the first step, since there's nowhere back to go — so this only ever shows up once the reader is already inside the tour.

finishLabel replaces nextLabel on the final step, so the reader can tell the tour is about to end rather than continue. It's the natural place to name whatever comes next — “Get started” instead of “Finish”.

skipLabel is the text on the quiet button that ends the tour early. It only appears while dismissible is on, and “Not now” usually beats “Skip” — it's the same action, minus the implication that the reader is missing something.