Skip to main content

Routes and dynamic targets

Guide people across Nuxt pages and late-rendered interface elements.

Move across routes and dynamic targets

Put the destination route on the destination step. Nuxt Tour waits for navigation, page settlement, preparation, and the target before it replaces the current card.

ts
// app/tours/onboarding.ts
export default defineTour({
  id: 'onboarding',
  steps: [
    {
      id: 'overview',
      target: 'project-overview',
      title: 'Project overview',
      content: 'Start with the current project.',
    },
    {
      id: 'create-task',
      route: { path: '/tasks', query: { view: 'board' } },
      target: 'create-task',
      title: 'Create a task',
      content: 'The board is ready before this step appears.',
      placement: 'bottom-end',
    },
  ],
})

Register the destination with a semantic name:

vue
<button v-tour-target="'create-task'">
  Create task
</button>

The default target timeout is five seconds. Override it only when this target has a measured reason to need more time.

ts
target: {
  id: 'slow-report',
  timeout: 10_000,
}

Register a component ref

Use useTourTarget() when a directive does not fit the component boundary.

vue
<script setup lang="ts">
const createButton = useTemplateRef<HTMLButtonElement>('createButton')

useTourTarget('create-task', createButton)
</script>

<template>
  <AppButton ref="createButton">
    Create task
  </AppButton>
</template>

The registration follows the ref. It unregisters when the component unmounts.

Use a selector only as an escape hatch

ts
target: { selector: '[data-third-party-checkout]' }

A selector is useful for markup that your application does not own. Prefer a semantic ID for application components because it survives CSS and DOM changes.