Vue product tours: libraries, working code, and build vs. buy.

// main.js
import { createApp } from "vue";
import Vue3Tour from "vue3-tour";
import "vue3-tour/dist/vue3-tour.css";
import App from "./App.vue";

createApp(App).use(Vue3Tour).mount("#app");

// App.vue — template:
//   <v-tour name="onboarding" :steps="steps" />
const steps = [
  { target: ".new-project-btn", content: "Everything starts here — create your first project." },
  { target: ".invite-field", content: "Onboarding sticks better with a teammate aboard." },
];

// useOnboardingTour.js — a composable
import Shepherd from "shepherd.js";
import "shepherd.js/dist/css/shepherd.css";

export function useOnboardingTour() {
  const tour = new Shepherd.Tour({
    useModalOverlay: true,
    defaultStepOptions: { scrollTo: true, cancelIcon: { enabled: true } },
  });

  tour.addStep({
    id: "create-project",
    text: "Everything starts here — create your first project.",
    attachTo: { element: ".new-project-btn", on: "bottom" },
    buttons: [{ text: "Next", action: tour.next }],
  });

  return tour; // call tour.start() from onMounted
}

import { driver } from "driver.js";
import "driver.js/dist/driver.css";

const tour = driver({
  showProgress: true,
  steps: [
    {
      element: ".new-project-btn",
      popover: { title: "Start here", description: "Create your first project." },
    },
    {
      element: ".invite-field",
      popover: { title: "Bring the team", description: "Invite a teammate early." },
    },
  ],
});

tour.drive(); // e.g. from onMounted

import introJs from "intro.js";
import "intro.js/introjs.css";

introJs()
  .setOptions({
    steps: [
      { element: document.querySelector(".new-project-btn"), intro: "Everything starts here." },
      { element: document.querySelector(".invite-field"), intro: "Invite a teammate early." },
    ],
  })
  .start();