Tour
Point each step at a control and show a card next to it. Next, Back, and the keyboard move through the tour.
Tour.Content positions against the activator with CSS Anchor Positioning. In browsers without position-area support it falls back to a viewport-edge position: fixed placement.
Installation
Install the plugin once. Tour reads that tour through useTour(). Registering steps, start, and next are documented on useTour.
import { createApp } from 'vue'
import { createTourPlugin } from '@vuetify/v0'
import App from './App.vue'
const app = createApp(App)
app.use(createTourPlugin())
app.mount('#app')A page that should run its own tour provides createTourContext instead of reading the plugin. The example below does that.
Usage
Wrap each target in Tour.Activator, and put that step’s card in its own Tour.Root.
Press Start.
Anatomy
<script setup lang="ts">
import { Tour } from '@vuetify/v0'
</script>
<template>
<Tour.Keyboard />
<Tour.Highlight />
<Tour.Root step="intro">
<Tour.Activator step="intro" />
<Tour.Content>
<Tour.Title />
<Tour.Description />
<Tour.Progress />
<Tour.Prev />
<Tour.Next />
<Tour.Skip />
</Tour.Content>
</Tour.Root>
</template>Examples
Press Start.
Accessibility
Tour.Content renders a non-modal dialog (role="dialog", no aria-modal) labelled by Tour.Title and described by Tour.Description. The spotlight target stays in the page, so Tab is allowed to leave the card. Tour.Progress is a live region (role="status") announcing the localized step count. Highlight also exposes a tour-level status region so the step count is announced when Progress lives inside a step. Tour.Highlight’s scrim is aria-hidden. When the overlay is ready, focus moves to Content unless a field already has it. When the tour stops or completes, focus returns to the element that was focused before start(). blocking also marks the rest of the page inert. The card, the scrim, and the active target stay operable unless blockActivator is set.
ARIA Attributes
| Attribute | Value | Element |
|---|---|---|
role | dialog | Content |
aria-labelledby | Title element ID | Content |
aria-describedby | Description element ID | Content |
role | status | Progress |
aria-label | Localized previous / next / complete / skip string | Prev, Next, Skip |
aria-disabled | boolean | Prev, Next |
aria-hidden | true | Highlight |
Tour.Title and Tour.Description generate the IDs referenced by Content. Render them inside Tour.Content so the dialog has an accessible name and description. Prev is disabled on the first step; Next is disabled while the tour is unready.
Keyboard Navigation
| Key | Action |
|---|---|
ArrowRight | Advances; completes on the last step |
ArrowLeft | Moves to the previous step |
Enter | Advances unless a control is focused; completes on the last step. Enter uses the same widget guard as the arrows. |
Escape | Stops the tour without completing |
Tab | Moves focus. It is not trapped; the target stays reachable |
Escape | Stops the tour even when Tour.Keyboard is omitted. Content listens on its own |
Tour.Keyboard is renderless and only binds arrows and Enter while isActive. Arrows do nothing when focus is inside a slider, tablist, listbox, radiogroup, menu, or <select>. Escape is also bound by Content, so a card still dismisses without Keyboard. Space on a focused Prev / Next / Skip activates that control natively.
FAQ
Root is per-step context: isActive, title and description ids, and navigation delegates. Install createTourPlugin once when targets live outside this page, and read that tour with useTour(). Provide createTourContext around a page when that page should run a tour of its own.
No. blocking swallows clicks on the backdrop and blockActivator swallows clicks on the cutout. Neither calls stop() or complete(). Dismiss with Skip, Escape, or tour.stop().
Content stays hidden until that step’s activator has an element. A step with noActivator centers immediately, and Highlight paints a full scrim for it instead of a cutout. Tour.Highlight and Tour.Content promote themselves above overlays that open later, so a step that opens search or settings does not cover the card.
placement on Content is the default (bottom). A ticket placement of top, bottom, left, right, or center overrides it. A step with noActivator centers.
Next on the last step calls complete(), so the tour ends with isComplete true. Skip emits skip and then stop(), so the tour ends without completing. Escape calls stop() without emitting skip.