Interaction and focus

Choose how much of the product remains available during each step.

Choose an interaction mode

Each step chooses one interaction boundary. The default is modal.

Mode	Available interface	Use it for
`modal`	Tour card only	Explanation and navigation
`target`	Tour card and highlighted target	A button, input, or small control group
`page`	Entire page	Observation while the product remains usable

Let the user operate the target

{
  id: 'filters',
  target: 'project-filters',
  title: 'Narrow the project list',
  content: 'Try the filters before you continue.',
  interaction: 'target',
}

The focus scope contains the card and highlighted target. The overlay blocks the rest of the page.

Keep the full page available

{
  id: 'arrange-board',
  target: 'project-board',
  title: 'Arrange the board',
  content: 'Move a card when you are ready.',
  interaction: 'page',
}

Page interaction is intentionally permissive. Use it only when the tour can remain correct after the user changes other interface state.

Start from a synchronous user action

vue

<script setup lang="ts">
const onboarding = useNuxtTour('onboarding')
</script>

<template>
  <button @click="onboarding.start()">
    Show me around
  </button>
</template>

A synchronous trigger gives the runtime a reliable focus return point. Escape, the close button, cancellation, and completion restore focus when that element still exists.