Skip to main content

Show people around. Keep Nuxt feeling like Nuxt.

Accessible, route-aware product tours with typed definitions, semantic targets, and defaults you can trust.

Read the guide
Route-awareWaits for Nuxt navigation and late targets.
Fully typedTour and step IDs inferred from app/tours.
AccessibleFocus, keyboard, contrast, and motion handled.

Try the actual library

Click through nearby, distant, downward, and upward targets. Each move uses the same polished adaptive timing.

Friday, 29 August

Projects

Wetland Atlas

12 tasks

In progress

Solar Commons

8 tasks

In progress

Forest Archive

Complete

Completed
app/tours/onboarding.tstarget: 'new-project', interaction: 'target'

Keyboard navigation, focus management, dark mode, and reduced motion are built in.

From first tour to product-ready patterns.

Run focused recipes for rich media, live controls, Vue refs, route changes, conditional steps, and custom cards.

Open the interactive recipe lab
  • Images and Vue components
  • Routes and dynamic targets
  • Interaction and focus
  • Themes and custom cards

Small API. Serious runtime.

Define the journey once. Nuxt discovers it, generates the types, registers the host, and handles navigation.

Explore the complete API 
// app/tours/onboarding.ts
export default defineTour({
  id: 'onboarding',
  steps: [{
    id: 'create-project',
    route: '/projects',
    target: 'new-project',
    title: 'Create your first project',
    content: 'Start here to create a project and invite your team.',
  }],
})