driver-vue

driver-vue

Product tours, highlights and hints for Vue 3, rendered with your own components.
A port of driver.js: same API, same class names, your markup.

Install

pnpm add driver-vue

Nuxt 4: pnpm add nuxt-driver-vue and add "nuxt-driver-vue" to modules.

Use

<script setup lang="ts">
import { useDriver, DriverTour } from "driver-vue";
import "driver-vue/style.css";

const { drive } = useDriver({
  showProgress: true,
  steps: [
    { element: "#hero", popover: { title: "Welcome", description: "This is the hero." } },
    { element: "#cta", popover: { title: "Call to action", side: "left" } },
  ],
});
</script>

<template>
  <button @click="drive()">Start tour</button>
  <DriverTour />
</template>

Your own popover

<DriverTour>
  <template #popover="{ popover, index, total, isLast, next, prev, close }">
    <MyCard :title="popover.title" :progress="(index + 1) / total">
      <MyButton variant="ghost" @click="close">Skip</MyButton>
      <MyButton @click="prev">Back</MyButton>
      <MyButton @click="next">{{ isLast ? "Finish" : "Next" }}</MyButton>
    </MyCard>
  </template>
</DriverTour>

Slots: popover, title, description, close, footer, progress, prev, next, arrow, overlay, stage. A step can carry popover.component; components.popover / components.overlay set app-wide defaults; useDriver().state plus useDriverPosition cover the fully headless case.

Highlight animation

useDriver({ duration: 600, easing: t => 1 - Math.pow(1 - t, 3), stageClass: "glow" });

.driver-stage.glow {
  box-shadow: 0 0 0 3px rgba(56, 102, 232, 0.9), 0 0 24px 6px rgba(56, 102, 232, 0.5);
}

DriverBoxOverlay with animate: false moves the box with a CSS transition instead.

Hints

<script setup lang="ts">
import { useHints, DriverHints } from "driver-vue/hints";

const { hints, show } = useHints({
  hints: [{ element: "#search", popover: { title: "Search", description: "Press / to focus." } }],
});
</script>

<template>
  <button @click="show()">Show hints</button>
  <DriverHints :hints="hints" />
</template>

Documentation

Guides, live demos and the API reference: eg0r0k.github.io/driver-vue.

License

MIT. driver.js is © Kamran Ahmed, MIT.