Slots

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

How step slots work

Every slot name is prefixed with the value of the slot property on the active step.

const steps = [
  {
    target: ".hero",
    title: "Welcome",
    slot: "intro",   // → slots become #intro-header, #intro-body, etc.
  },
];
No slot value?
A step without a slot value uses the bare slot name (e.g. #header). It is recommended to always set slot when you want to customise a specific step.

Slot props

Every slot receives the same set of props:

currentStepnumber
Current step index (0-based).
totalStepsnumber
Total number of steps.
isLastStepboolean
true if on the final step.
stepTourStep
The full step definition object.
startTour / endTour / skipTour / nextStep / prevStep / pause / resume() => void
Tour control methods.
goToStep(n: number) => void
Jump to a step by index.
isLockedboolean
true while scroll is locked.

Available slots

header

Wraps the entire header section (title + sub-text).

<template #intro-header="{ currentStep, totalSteps, endTour }">
  <div class="my-header">
    <span>{{ currentStep + 1 }} / {{ totalSteps }}</span>
    <button @click="endTour">✕</button>
  </div>
</template>

title

Just the title line inside the header.

<template #intro-title="{ step }">
  <h2 class="my-title">{{ step.title }}</h2>
</template>

sub-text

The secondary line below the title.

<template #intro-sub-text="{ step }">
  <p class="my-subtext">{{ step.subText }}</p>
</template>

body

The main body content area.

<template #intro-body="{ step }">
  <div class="my-body" v-html="step.body" />
</template>

progress

Rendered when show-progress is true. Override to use your own indicator.

<template #intro-progress="{ currentStep, totalSteps, progress }">
  <div class="h-1 rounded-full bg-zinc-100">
    <div :style="{ width: `${progress * 100}%` }" class="h-full bg-sky-500" />
  </div>
</template>

actions

Wraps the entire button row. Replaces all four buttons at once.

<template #intro-actions="{ nextStep, prevStep, isLastStep, endTour }">
  <div class="my-actions">
    <button @click="prevStep">Back</button>
    <button v-if="!isLastStep" @click="nextStep">Next</button>
    <button v-else @click="endTour">Finish</button>
  </div>
</template>

skip-button / prev-button / next-button / finish-button

Individual button overrides:

<template #intro-skip-button="{ skipTour }">
  <button @click="skipTour">Maybe later</button>
</template>

<template #intro-next-button="{ nextStep }">
  <button @click="nextStep">Next →</button>
</template>

<template #intro-finish-button="{ endTour }">
  <button @click="endTour">All done!</button>
</template>

arrow

The Popper.js arrow element.

Keep data-popper-arrow
If you replace the arrow slot, keep data-popper-arrow on the element so Popper.js can position it correctly.
<template #intro-arrow>
  <div id="nt-arrow" data-popper-arrow class="my-custom-arrow" />
</template>

Methods

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

Emits

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