Skip to main content

Events and progress

Observe tour outcomes without coupling the runtime to one analytics provider.

Observe events and record progress

Subscribe to stable events from the controller. Keep product analytics outside the tour definition.

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

const stop = onboarding.on('*', (event) => {
  useAnalytics().track('Product tour event', {
    type: event.type,
    tourId: event.tourId,
    stepId: 'stepId' in event ? event.stepId : undefined,
  })
})

onScopeDispose(stop)
</script>

Use tour:end for the final outcome:

ts
const stop = onboarding.on('tour:end', (event) => {
  if (event.reason === 'completed') {
    markOnboardingComplete()
  }
})

The end reason is completed, skipped, or cancelled. A cancelled event can also include the application cancellation reason.

React to the current step

Controller state uses readonly Vue refs:

vue
<template>
  <p v-if="onboarding.isActive.value">
    Step {{ onboarding.index.value + 1 }} of {{ onboarding.total.value }}
  </p>
</template>

In templates, Vue can unwrap top-level refs returned directly from setup. In scripts, read .value.

Do not use an event listener to control navigation. Events are observational. Use next(), previous(), goTo(), skip(), or cancel() for commands.