Vue Page Tour (Starter)

A small, dependency-light, route-aware page tour for Vue 3. Smooth scroll, backdrop highlight, keyboard controls, and a simple steps API.

Install

pnpm add @your-scope/vue-page-tour
# or npm i @your-scope/vue-page-tour

Usage

import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import createTour, { TourProvider, useTour } from '@your-scope/vue-page-tour'
import '@your-scope/vue-page-tour/style.css'

app.use(router).use(createTour({ autoScroll: true }))

<script setup lang="ts">
import { useTour, TourProvider } from '@your-scope/vue-page-tour'
const tour = useTour()
const steps = [
  { target: '#hero', content: 'Highlight hero' },
  { route: '/settings', target: '#settings', content: 'Settings area' },
  { target: 'viewport', placement: 'center', content: 'Done!' }
]
</script>
<template>
  <button @click="tour.start(steps)">Start tour</button>
  <TourProvider :steps="steps" />
</template>

API

• createTour(options) global defaults.
• useTour() returns { start, next, prev, go, stop, isActive, index, steps, mergeOptions }.
• Step fields: target, route?, content, placement?, pad?, scrollOffset?, onBeforeEnter?, onAfterEnter?, onBeforeLeave?, onAfterLeave?.

Accessibility

• Focus lands on tooltip; ESC to close (configurable). Buttons are real <button>s. Backdrop has aria-hidden.

Performance

• No heavy deps; highlight box uses a single ResizeObserver and rAF.

Publish

• Update package.json name/version.
• pnpm build → dist/
• npm publish --access public