🧭 ModernTour Component (v2+)

The ModernTour component provides interactive product tours and onboarding guidance in your Vue 2 app — complete with animations, progress tracking, route awareness, and persistent state.

It is designed for use inside the Gull Theme and supports both single-page and multi-route flows.

---

🚀 Features

✅ Smooth highlight and card animations
✅ Auto-progress and manual navigation
✅ Persistent progress (via localStorage or TourManager)
✅ Works across multiple routes
✅ Finish overlay with confetti animation
✅ Skip, Resume, and Reset options
✅ Keyboard navigation (←, →, Esc)
✅ Router-aware steps (route key)
✅ Easy integration with a global TourManager

---

📦 Installation

# using npm
npm install --save modern-tour

# or via yarn
yarn add modern-tour

🧩 Basic Usage

Define your tour steps in a Vue component:

<script>
export default {
  data() {
    return {
      tourSteps: [
        {
          target: '#user-info-tour',
          title: 'Student Information',
          content:
            'Here you can view the student’s basic information — including name, class, and contact details.',
          placement: 'auto',
        },
        {
          target: '#fees-details-tour',
          title: 'Fees Details',
          content:
            'This section shows all fee records, including payment history and pending amounts.',
          placement: 'auto',
        },
        {
          target: '#view-all-receipt',
          title: 'View All Receipts',
          content:
            'Click here to see all receipts related to the student’s payments.',
          placement: 'auto',
        },
        {
          target: '#settings',
          title: 'Settings',
          content:
            'This shortcut takes you to the settings section to customize your preferences.',
          route: { name: 'FeesSetting' },
          placement: 'auto',
        },
      ],
    }
  },
}
</script>

<template>
  <ModernTour
    :steps="tourSteps"
    tour-id="student-fees-tour"
    :auto-start="true"
    :finish-behavior="'stop'"
  />
</template>

⚙️ Props

Prop	Type	Default	Description
tourId	String	required	Unique ID for persisting state
steps	Array	required	List of steps (see below)
autoStart	Boolean	false	Automatically start the tour after mount
autoStartDelay	Number	600	Delay before auto-start (ms)
scrollIntoView	Boolean	true	Scrolls to target element before showing
finishBehavior	String	'stop'	What to do after finish (stop, redirect, restart)
finishRedirectRoute	Object/String	null	Vue Router destination on finish
finishSound	Boolean	false	Play small completion sound
reopenAfterFinish	Boolean	false	Automatically restart after finishing
pad	Number	12	Padding around highlight target
spotShape	String	'rect'	Shape of highlight (rect, circle, auto)
finishMessage	String	Congratulations — tour finished!	Custom completion message

🧠 Step Object

Each step in the steps array supports the following keys:

Key	Type	Description
target	String (CSS selector)	Element to highlight
title	String	Title shown in the card
content	String (HTML allowed)	Description text
placement	String	'auto', 'top', 'bottom', 'left', 'right'
route	Object/String	Optional Vue Router destination
shape	String	'rect' or 'circle' (if override needed)

🎮 Navigation

Button	Action
Next	Move to next step
Prev	Go to previous step
Skip	Skip all remaining steps and mark finished
Steps	Open step list modal (jump to step)
Finish	Complete the tour and trigger animation

Keyboard shortcuts:

• → : Next step
• ← : Previous step
• Esc : Close tour

💾 Persistence

Each tour’s progress is stored in localStorage:

tour:<tourId>:completed // Array of completed step indices
tour:<tourId>:done // "1" if tour completed

You can reset progress manually:

localStorage.removeItem('tour:student-fees-tour:completed')
localStorage.removeItem('tour:student-fees-tour:done')