Props

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

Tour props

All props are optional except steps.

stepsTourStep[]required
Array of step definitions. At least one step is required. More on step props below
namestring
Defaultdefault
Unique name for this tour. Used as the localStorage key suffix.
saveToLocalStorage'never' | 'step' | 'end'
Defaultend
Controls when (and whether) tour progress is persisted to localStorage.
  • 'end' — save only when the tour is fully completed
  • 'step' — save after each step; allows resuming mid-tour on next visit
  • 'never' — never persist; tour always shows on every page load
ttlnumber
How many days a completed tour stays hidden before showing again. Omit for no expiry.
autoStartboolean
Defaultfalse
Start the tour automatically when the component mounts.
startDelaynumber | string | null
Default100
Milliseconds to wait before showing the first step when autoStart is true.
highlightboolean
Defaultfalse
Highlight the target element with an outline while on that step.
backdropboolean
Defaultfalse
Show a semi-transparent backdrop behind the tooltip.
showArrowboolean
Defaulttrue
Show the Popper.js arrow on the tooltip.
showProgressboolean
Defaultfalse
Show a "Step N of M" progress counter inside the tooltip.
keyboardboolean
Defaulttrue
Enable keyboard navigation. → / ↓ = next step, ← / ↑ = prev step, Escape = skip.
scrollBehavior'jump' | 'smooth' | 'none'
Defaultjump
Scroll behaviour when moving between steps. 'jump' uses jump.js, 'smooth' uses native scrollIntoView, 'none' disables scrolling.
trapFocusboolean
Defaulttrue
Trap keyboard focus inside the tooltip while active.
lockScrollboolean
Defaulttrue
Prevent the page from scrolling while the tour is active.
transition'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right'
Defaultfade
Tooltip enter/leave animation. 'fade' is a subtle opacity + scale. The slide variants move the tooltip in from a given direction.
nextButtonButtonConfig
Customise the Next button label and icons.
prevButtonButtonConfig
Customise the Prev button label and icons.
skipButtonButtonConfig
Customise the Skip button label and icons.
finishButtonButtonConfig
Customise the Finish button (shown on the last step).

Step props (TourStep)

These are the options available on each object in the steps array.

targetstring | HTMLElement | Ref | null
The element the step should point at. Accepts a CSS selector, HTMLElement, or a reactive ref/getter. Omit to centre the tooltip on screen.
titlestring | HTMLElement | Ref | null
Tooltip title. Supports plain text or HTML strings.
subTextstring | HTMLElement | Ref | null
Secondary line below the title.
bodystring | HTMLElement | Ref | null
Main body content.
popperConfigPartial<OptionsGeneric>
Per-step Popper.js config, deep-merged over the tour default.
onShow() => void | boolean | Promise<...>
Called before the step is shown. Return false to abort the transition.
onNext() => void | Promise<void>
Called when Next is clicked on this step.
onPrev() => void | Promise<void>
Called when Prev is clicked on this step.
slotstring
Slot-name prefix for this step. A step with slot: "intro" exposes #intro-header, #intro-body, etc.
backdropboolean
Defaultfalse
Show a backdrop on this step only. Overrides the tour-level backdrop prop.
transition'fade' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right'
Tooltip animation for this step only. Overrides the tour-level transition prop. Falls back to the tour prop, then 'fade'.

Button config (ButtonConfig)

Used by nextButton, prevButton, skipButton, and finishButton.

labelstring
Button label text.
leftIconstring
Icon displayed to the left of the label. Any icon from icones.netlify.app is supported.
rightIconstring
Icon displayed to the right of the label.
<template>
  <VTour
    :steps="steps"
    :next-button="{ label: 'Continue', rightIcon: 'heroicons:arrow-right' }"
    :skip-button="{ label: 'Not now' }"
    :finish-button="{ label: 'All done!', leftIcon: 'heroicons:check' }"
  />
</template>

Create a tour

Learn how to create a tour in your Nuxt project using the nuxt-tour module.

Methods

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