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

Nuxt starter68% complete · 3 active tasks

View the recipe code

Copy

import RecipeRichMedia from '../components/tours/RecipeRichMedia.vue'export default defineTour({  id: 'recipe-media',  steps: [{    id: 'media',    target: 'recipe-media-target',    title: 'Use a Vue component for rich content',    content: RecipeRichMedia,    placement: 'bottom',  }],})

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.