Vue product tour & onboarding library

<script setup lang="ts">
import "@glowhop/styles-tour/default.css";
import { GlowTourDefault, useGlowTour } from "@glowhop/vue-tour";

const { tour, create, start, cancel, status, currentStepIndex, totalSteps } = useGlowTour();

const workflow = create("product-tour")
  .step({
    id: "features",
    target: '[data-tour="features"]',
    title: "Explore features",
    content: "Learn about all the capabilities.",
  })
  .step({
    id: "pricing",
    target: '[data-tour="pricing"]',
    title: "Check pricing",
    content: "See plans that fit your needs.",
  })
  .build();
</script>

<template>
  <main>
    <section data-tour="features">
      <h2>Features</h2>
      <p>We offer guided tours, SSR support, and full keyboard navigation.</p>
    </section>
    <section data-tour="pricing">
      <h2>Pricing</h2>
      <p>Open source and free.</p>
    </section>
    <p v-if="status === 'active'">
      Step {{ currentStepIndex + 1 }} of {{ totalSteps }}
      <button @click="cancel()">Stop</button>
    </p>
    <button v-else @click="start(workflow)">Start tour</button>
  </main>
  <GlowTourDefault :tour="tour" />
</template>