Create Customizable Guided Tours In Vue 3 – VueJS Tour

A lightweight yet fully customizable Vue 3 tour component that helps guide your visitors through new features or important sections in your applications.

How to use it:

1. Install and import the tour component.

import { createApp } from "vue";
import App from "./App.vue";
import VueJsTour from '@globalhive/vuejs-tour';
import '@globalhive/vuejs-tour/dist/style.css';
const app = createApp(App)
  .use(VueJsTour)
  .mount("#app");

2. Create steps for the tour.

<template>
  <div>
    <div id="selectByID">Step 1</div>
    <p class="selectByClass">Step 2</p>
    <button data-step="3">Step 3</button>
    <VTour :steps="steps"/>
  </div>
</template>

const steps = [
  {
    target: '#selectByID',
    content: 'This is the first step',
    // auto, auto-start, auto-end
    // top, top-start, top-end
    // bottom, bottom-start, bottom-end
    // right, right-start, right-end
    // left, left-start, left-end
    placement: 'top',
    onNext: () => {
      return new Promise(async (resolve) => {
        await longRunningFunction();
        resolve();
      });
    },
  },
  {
    target: '.selectByClass',
    content: 'This is the second step',
    onPrev: () => {
      return new Promise(async (resolve) => {
        await longRunningFunction();
        resolve();
      });
    },
  },
  {
    target: '[data-step="3"]',
    content: 'This is the last step',
    onShow: () => {
      console.log('Step is shown');
    },
  }
];

3. Start the tour.

// automatically
<VTour :steps="steps" autoStart/>

// manually
<VTour ref="tour" :steps="steps"/>
import { ref, onMounted } from 'vue';
const tour = ref(null);
onMounted(() => {
  tour.value.startTour();
});

4. Available props.

steps: {
  type: Array,
  required: true
},
autoStart: {
  type: Boolean,
  default: false
},
startDelay: {
  type: Number,
  default: 0
},
highlight: {
  type: Boolean,
  default: false
}

5. API methods:

startTour();
nextStep();
prevStep();
endTour();
resetTour()
nextStep();
prevStep();
endTour();

6. Events.

• @onTourStart
• @onTourEnd

Preview:

Changelog:

v1.3.5 (05/22/2023)

• Bugfix

v1.3.4 (04/19/2023)

• component: Fixed error on first step / no highlight

Download Details:

Author: GlobalHive

Live Demo: https://globalhive.github.io/vuejs-tour/

Download Link: https://github.com/GlobalHive/vuejs-tour/archive/refs/heads/master.zip

Official Website: https://github.com/GlobalHive/vuejs-tour

Install & Download: