Vue API reference

The Vue adapter (@glowhop/vue-tour) exports components, hooks, and utility functions.

Functions

createGlowTour(options?)

Creates a tour controller instance. Inherited from Core.

Signature:

function createGlowTour(options?: GlowTourOptions): Tour

Components

GlowTourDefault

Pre-composed tour with overlay, popover, pointer, and all navigation buttons.

Props:

interface GlowTourDefaultProps {
  tour: Tour
}

Usage:

<GlowTourDefault :tour="tour" />

GlowTour*

Composition primitives for custom layouts:

• GlowTourRoot - Root container
• GlowTourOverlay - Backdrop overlay
• GlowTourPointer - Decorative indicator/arrow
• GlowTourPopover - Dialog container
• GlowTourHeader - Title area
• GlowTourContent - Description area
• GlowTourFooter - Navigation button container
• GlowTourAdvanceTrigger - Next step button
• GlowTourBackTrigger - Previous step button
• GlowTourCancelTrigger - Dismiss button

These components are exported with both the GlowTour* naming convention shown above and as flat named exports: GlowTourRoot, GlowTourOverlay, GlowTourPointer, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, GlowTourAdvanceTrigger, GlowTourBackTrigger, GlowTourCancelTrigger.

Props (GlowTourRoot):

interface GlowTourRootProps {
  tour: Tour
  class?: string
  style?: CSSProperties
}

GlowTourPointer (detailed)

Customizes the directional content (emoji or custom content) of the pointer indicator.

Props:

interface GlowTourPointerProps {
  directionContent?: {
    top?: VNodeChild
    bottom?: VNodeChild
    left?: VNodeChild
    right?: VNodeChild
  }
  class?: string
  style?: CSSProperties
}

Default glyphs (when directionContent is not set):

• top: 👆
• bottom: 👇
• left: 👈
• right: 👉

Usage (with custom content):

<GlowTourPointer
  :direction-content="{
    top: '⬆️',
    bottom: '⬇️',
    left: '⬅️',
    right: '➡️'
  }"
/>

Usage (with custom component):

<GlowTourPointer
  :direction-content="{
    bottom: SomeCustomComponent
  }"
/>

Usage (default pointers):

<GlowTourRoot :tour="tour">
  <GlowTourOverlay />
  <GlowTourPointer />
  <GlowTourPopover>
    <GlowTourHeader />
    <GlowTourContent />
    <GlowTourFooter>
      <GlowTourCancelTrigger />
      <GlowTourAdvanceTrigger />
    </GlowTourFooter>
  </GlowTourPopover>
</GlowTourRoot>

Hooks

useTour()

Returns reactive tour state as a ref. Must be called inside <GlowTourRoot tour={...}>.

Signature:

function useTour(): ShallowRef<TourState<VueTourContent>>

Returns:

ShallowRef<{
  name: string
  totalSteps: number
  currentStepIndex: number
  currentStep: TourCurrentStep<VueTourContent> | null
  direction: "advance" | "previous"
  canAdvance: boolean
  canPrevious: boolean
  canCancel: boolean
  isFirstStep: boolean
  isLastStep: boolean
  status: "idle" | "starting" | "transitioning" | "active" | "finished" | "cancelled" | "error" | "disposed"
  error: Error | null
}>

Usage:

<script setup>
import { useTour } from "@glowhop/vue-tour";

const state = useTour();
</script>

<template>
  <div>
    <p>Status: {{ state.status }}</p>
    <button :disabled="!state.canAdvance" @click="tour.advance()">
      Next
    </button>
  </div>
</template>

Types

• Tour - Tour controller
• TourState - Tour state
• WorkflowDefinition - Immutable workflow
• StepPropsStore - Step state store
• VueTourContent - Vue content type
• PointerDirectionContent - Content configuration for GlowTourPointer component directions
• GlowTourOptions - Options for createGlowTour
• StartOptions - Options for tour.create

Exports

export type { GlowTourOptions, StartOptions } from "@glowhop/core-tour";
export { GlowTourDefault } from "./components/default-tour.js";
export {
  GlowTourAdvanceTrigger,
  GlowTourBackTrigger,
  GlowTourCancelTrigger,
  GlowTourContent,
  GlowTourFooter,
  GlowTourHeader,
  GlowTourOverlay,
  GlowTourPointer,
  GlowTourPopover,
  GlowTourRoot,
  useTour,
} from "./components/tour-components.js";
export type {
  StepPropsStore,
  Tour,
  TourState,
  VueTourContent,
  WorkflowDefinition,
} from "./glow-tour.js";
export { createGlowTour } from "./glow-tour.js";