Tour

Step-by-step spotlight walkthrough

A few-step walkthrough of a new or changed screen, pointing at the parts that matter. Keep it short, let people skip it, and don't hide anything essential in it.

Three to five stops is plenty. Bind v-model:open to "hasn't seen this yet" and v-model:step to resume where they left off; a step without a target sits centred, which makes a good opening and closing frame.

Basic

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessInput, BlessTour, type BlessTourStep } from "blessing-ui";
const open = ref(false);
const steps: BlessTourStep[] = [
  { title: "Welcome", text: "Three quick stops. Esc skips at any time." },
  {
    target: "#tour-search",
    title: "Search",
    text: "Filter episodes by title or air date.",
    placement: "bottom",
  },
  {
    target: "#tour-save",
    title: "Save",
    text: "Everything auto-saves; this forces it.",
    placement: "top",
  },
];
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessButton @click="open = true">Start tour</BlessButton>
    <BlessInput id="tour-search" placeholder="search…" />
    <div><BlessButton id="tour-save" variant="outline">Save</BlessButton></div>
    <BlessTour v-model:open="open" :steps />
  </div>
</template>

• Each step points at target (a selector) with a spotlight; without a target it sits in the middle. The step panel takes focus; Esc skips; focus returns to where it was when the tour ends.
• It scrolls the target into view, without animation under reduced motion. @finish / @skip say how it ended.

Usage

import { BlessTour } from "blessing-ui";

API

Props

Name	Type	Default	Description
steps*	BlessTourStep[]	—
labels	Partial<{ next: string; prev: string; done: string; skip: string; }>	—
spotlight	boolean	true	dim the page and cut a hole around the target
open	boolean	false
step	number	0

Events

Name	Payload	Description
update:open	[value: boolean]
skip	[]
update:step	[value: number]
finish	[]