Explore production tour patterns

Use these recipes when the first tour is working and you need a production pattern. The lab below runs the real library. It does not simulate the overlay or card.

Learn by running the real thing

Select a pattern, start its tour, and inspect the code that powers it.

Actual Nuxt Tour runtime

recipe-preview.vue

Run recipe

Wetland restoration68% complete · 3 active areas

View the recipe code

Copy

import ProjectOverview from '~/components/tours/ProjectOverview.vue'

export default defineTour({
  id: 'onboarding',
  steps: [{
    id: 'overview',
    target: 'project-overview',
    title: 'Your project overview',
    content: ProjectOverview,
  }],
})

Choose a recipe

• Add images and rich content with a normal Vue component.
• Move across routes and dynamic targets without timing guesses.
• Prepare and conditionally include steps with cleanup that runs exactly once.
• Choose an interaction mode for modal, target, or page interaction.
• Brand the card and translate labels without replacing the accessible host.
• Observe events and record progress without coupling the library to an analytics provider.

Each recipe uses the same four concepts: defineTour() describes, <TourHost /> renders, a composable controls, and a semantic target locates.