vue-app-tour

A lightweight product-tour / onboarding plugin for Vue 3. Highlights a target element with a spotlight overlay and shows a step tooltip with Back/Next navigation.

Install

npm install vue-app-tour

Usage

// main.js
import { createApp } from 'vue'
import TourPlugin from 'vue-app-tour'
import App from './App.vue'

const app = createApp(App)
app.use(TourPlugin, {
  overlayColor: 'rgba(0, 0, 0, 0.5)', // backdrop/spotlight color
  padding: 6,                         // spotlight padding around target, in px
  scrollIntoView: true,               // auto-scroll target into view
  closeOnOverlayClick: true,          // clicking the backdrop ends the tour
})
app.mount('#app')

<!-- App.vue -->
<template>
  <button id="create-btn">+ Create</button>
  <button @click="startTour">Start tour</button>

  <!-- Mount once, anywhere near the root -->
  <TourOverlay />
</template>

<script setup>
import { useTour } from 'vue-app-tour'

const { start } = useTour()

function startTour() {
  start([
    {
      target: '#create-btn',
      title: 'Create',
      content: 'Click here to create something new.',
      placement: 'right', // 'top' | 'bottom' | 'left' | 'right'
    },
  ])
}
</script>

TourOverlay is auto-registered globally by the plugin, so you don't need to import it — just reference it in any template.

API

useTour()

Returns:

• state — readonly reactive tour state (steps, currentIndex, active, options)
• start(steps) — begin a tour from an array of step objects
• next() — advance to the next step (ends the tour after the last step)
• prev() — go back a step
• goTo(index) — jump to a specific step index
• stop() — end the tour immediately

Step object

| Field | Type | Required | Description | | ----------- | ------ | -------- | ----------------------------------------- | | target | string | yes | CSS selector for the element to highlight | | title | string | no | Tooltip heading | | content | string | yes | Tooltip body text | | placement | string | no | 'top' | 'bottom' | 'left' | 'right' (default 'bottom') |

Development

npm install
npm run dev      # runs the demo app
npm run build    # builds the library to dist/

License

MIT