@glowhop/vue-tour

@glowhop/vue-tour

ESM-only Vue 3 adapter with provide/inject refs for native reactive state. Content is Vue slot content. See the Core guide for workflow options and actions.

Compatibility: Vue 3.3+ (^3.3.0). SSR: the root renders through @vue/server-renderer and browser work starts on mount; hydration is verified at package level and in a production Nuxt app. Full contract: compatibility.

<script setup lang="ts">
import "@glowhop/styles-tour/default.css";
import { GlowTourDefault, createGlowTour } from "@glowhop/vue-tour";
const tour = createGlowTour();
const workflow = tour.create("intro").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build();
function start() { void tour.start(workflow); }
</script>
<template><button id="welcome">Welcome</button><button type="button" @click="start">Start tour</button><GlowTourDefault :tour="tour" /></template>

<script setup lang="ts">
import { GlowTourRoot, GlowTourOverlay, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, GlowTourAdvanceTrigger, createGlowTour } from "@glowhop/vue-tour";
const tour = createGlowTour(); const workflow = tour.create("custom").step({ id: "welcome", target: "#welcome", title: "Welcome", content: "Hello." }).build(); const start = () => void tour.start(workflow);
</script>
<template><button id="welcome" type="button" @click="start">Start</button><GlowTourRoot :tour="tour"><GlowTourOverlay /><GlowTourPopover><GlowTourHeader /><GlowTourContent /><GlowTourFooter><GlowTourAdvanceTrigger /></GlowTourFooter></GlowTourPopover></GlowTourRoot></template>

Use GlowTourRoot, GlowTourOverlay, GlowTourPointer, GlowTourPopover, GlowTourHeader, GlowTourContent, GlowTourFooter, and named triggers for composition. useGlowTour() runs a tour from a component and returns its state as refs; useGlowTourContext() reads that state inside GlowTourRoot. Static/dynamic targets, placement, interaction, scroll, callbacks, actions/events, cancellation, and cleanup follow Core.