Emits

Learn about the events emitted by the nuxt-tour module.

Listening to events

<template>
  <VTour
    :steps="steps"
    @tour:start="onStart"
    @tour:end="onEnd"
    @tour:skip="onSkip"
    @tour:step-change="onStepChange"
  />
</template>

<script lang="ts" setup>
  const onStart = () => console.log("Tour started");
  const onEnd = () => console.log("Tour completed");
  const onSkip = () => console.log("Tour skipped");
  const onStepChange = ({ from, to }: { from: number; to: number }) => {
    console.log(`Moved from step ${from} to step ${to}`);
  };
</script>

Event reference

tour:start() => void
Emitted when the tour begins — after the start delay has elapsed and the first step is visible.
tour:end() => void
Emitted when the tour is completed (user clicks Done / Finish, or endTour() is called programmatically). The tour is marked as completed in localStorage at this point.
tour:skip() => void
Emitted when the tour is dismissed early — by clicking Skip, pressing Escape, or calling skipTour(). The tour is marked as skipped in localStorage.
tour:step-change({ from: number, to: number }) => void
Emitted whenever the active step changes. Carries the previous (from) and next (to) step indices (0-based).

Example — analytics per step

<template>
  <VTour :steps="steps" @tour:step-change="track" />
</template>

<script setup lang="ts">
  const track = ({ from, to }: { from: number; to: number }) => {
    analytics.track("tour_step_change", { from, to });
  };
</script>

Migration from v0

Breaking changes
The event names changed in v1. Update any listeners in your templates.
v0v1
@onTourStart@tour:start
@onTourEnd@tour:end
props.onComplete callback@tour:end event
props.onSkip callback@tour:skip event
—@tour:step-change

Slots

Learn about the slots available on the nuxt-tour module.

Styles

Learn about the styles available on the nuxt-tour module.