Methods

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

There are two ways to call tour methods: via a template ref on the component, or via the useTour composable.

Called before mount?
If start() is called before the <VTour /> component mounts, it is queued and fires automatically once the component is ready.

Method reference

startTour() => void
Starts the tour from the first step (or the last saved step when saveToLocalStorage is 'step'). Does nothing if steps is empty or the tour has already been played and the stored entry is still valid.
endTour() => void
Ends the tour, marks it as completed in localStorage, unlocks scroll, releases the focus trap, and emits tour:end.
skipTour() => void
Same as endTour but marks the tour as skipped and emits tour:skip instead. Keyboard Escape also calls this.
nextStep() => void
Advances to the next step. On the last step, calls endTour() automatically.
prevStep() => void
Goes back to the previous step. Does nothing if already on step 0.
goToStep(index: number) => void
Jumps to a specific step by 0-based index. Starts the tour first if it has not yet begun.
pause() => void
Hides the tooltip without destroying the popper instance or clearing state. The tour remains "active" but invisible.
resume() => void
Shows the tooltip again after a pause() call.
resetTour() => void
Clears localStorage for this tour, resets the step index to 0, and calls startTour().
recalculatePopper() => void
Recalculates the tooltip position. Useful if the target element has moved or changed size after the step was shown.

useTour — reactive state

In addition to the methods above, useTour exposes reactive state you can use in your templates:

isPlayedboolean
true if the tour has been completed or skipped and the stored entry is still valid.
isActiveboolean
true while the tour is currently running.
isPausedboolean
true while the tour is paused.
currentStepnumber
Current step index (0-based).
totalStepsnumber
Total number of steps in the tour.
progressnumber
Fraction of steps completed: (currentStep + 1) / totalSteps.
lastPlayedAtDate | null
When the tour was last completed or skipped.
completionStatus'completed' | 'skipped' | null
How the tour was last closed.
markPlayed() => void
Write completed: true to localStorage without running the tour.
markUnplayed() => void
Remove the entry from localStorage without restarting the tour.
reset() => void
Clear storage and restart the tour. Equivalent to markUnplayed() + start().
const { isPlayed, isActive, currentStep, totalSteps, progress } = useTour("onboarding");

Props

Learn about the props available in the nuxt-tour module.

Slots

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