Installation

driver-vue needs Vue 3.5 or later. For Nuxt 4 there is a module, see Nuxt.

# npm
npm install driver-vue

# pnpm
pnpm add driver-vue

# yarn
yarn add driver-vue

vue is a peer dependency. The package depends on @floating-ui/vue for popover positioning.

Setup

Install the plugin and import the stylesheet once:

// main.ts
import { createApp } from "vue";
import { DriverPlugin } from "driver-vue";
import "driver-vue/style.css";
import App from "./App.vue";

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

useDriver() creates a driver, and <DriverTour /> renders it: the overlay and the popover, teleported to body. A <DriverTour /> without a driver prop renders the driver of the useDriver() call in its own component (or an ancestor), so placing both in the same component is enough:

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

const { highlight } = useDriver();

function help() {
  highlight({
    element: "#some-element",
    popover: {
      title: "Title",
      description: "Description",
    },
  });
}
</script>

<template>
  <button @click="help">Help</button>
  <DriverTour />
</template>

Some element on the page.

<DriverTour /> renders nothing while no tour is active. Basic usage continues with tours and the rest of the API.

One <DriverTour /> for the app

The plugin also creates an app-wide driver. A <DriverTour /> in your root component or layout renders it, and any component can use it through useDriver(config, { shared: true }):

<!-- App.vue -->
<template>
  <RouterView />
  <DriverTour />
</template>

// in any component
const { drive } = useDriver({ steps: [/* ... */] }, { shared: true });

The app-wide driver keeps running when the component unmounts, which is what a tour across routes needs. Basic usage explains how <DriverTour /> picks its driver.

Without the plugin

The plugin is optional. It provides the config defaults, the app-wide driver and global component registration (see Plugin options). Without it, useDriver() with a <DriverTour /> in the same component works as above. A driver made with createDriver() is passed as a prop:

<DriverTour :driver="myDriver" />

Hints

Hints have their own entry point, so an app that only uses tours does not load them. They use the same stylesheet:

import { useHints, DriverHints } from "driver-vue/hints";
import "driver-vue/style.css";

Stylesheet

driver-vue/style.css is the driver.js look, written with CSS custom properties. Import it once. Theming lists every variable and class name, in case you want to change the defaults or write your own stylesheet instead.