Skip to main content

Conditions and preparation

Include relevant steps and prepare interface state before a target is resolved.

Prepare and conditionally include steps

Use when() to decide whether a step belongs in the current journey. Use prepare() to create the interface state that the destination needs.

Skip an irrelevant step

ts
{
  id: 'invite-team',
  target: 'invite-team',
  title: 'Invite your team',
  content: 'Add the people who work on this project.',
  when: () => useState<boolean>('can-invite-team').value,
}

next() and previous() skip a step when when() returns false. An exact goTo('invite-team') call rejects instead of silently opening another step.

Reveal a target before resolving it

ts
{
  id: 'import',
  target: 'import-panel',
  title: 'Import existing work',
  content: 'Upload a CSV file or connect another service.',
  async prepare({ signal }) {
    const importPanelOpen = useState('import-panel-open', () => false)
    importPanelOpen.value = true
    await nextTick()

    if (signal.aborted) return

    return () => {
      importPanelOpen.value = false
    }
  },
}

Nuxt Tour runs the returned cleanup once when the step ends or fails. The same cleanup runs when the user cancels or another tour replaces this one.

Use the supplied AbortSignal for request cancellation:

ts
async prepare({ signal }) {
  await $fetch('/api/project-tour-context', { signal })
}

Do not use arbitrary delays to wait for rendering. Change the state, await the framework update when necessary, and let target resolution wait for the actual element.