Vue

GlowTour.js for Vue

Vue 3.3+ components with a provide/inject-scoped tour instance. GlowTourDefault drops straight into your template - no manual mounting required.

Read the Vue guide Getting started

Install

npm i @glowhop/vue-tour @glowhop/styles-tour

22.7 KiB gzipped in total: 0.1 KiB of adapter over the shared 21.2 KiB engine, plus 1.4 KiB of theme CSS you can replace with your own.

@glowhop/vue-tour on npm · @glowhop/styles-tour on npm

Quick start

From examples/vue in the GlowTour.js repository - copy, paste, run.

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

const tour = createGlowTour();
const workflow = tour
  .create("welcome")
  .step({ id: "welcome-2", target: "#welcome", title: "Welcome", content: "Hello world!" })
  .build();

function start() {
  void tour.run(workflow);
}
</script>

<template>
  <div style="padding: 20px">
    <h1>GlowTour.js - Vue Example</h1>
    <button id="welcome" type="button" @click="start"
      style="padding: 10px 20px; font-size: 16px">
      Start tour
    </button>
  </div>
  <GlowTourDefault :tour="tour" />
</template>