Create Customizable Guided Tours In Vue 3 – VueJS Tour

Install & Download:

Description:

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.

name:{
  type: String,
  default: "default"
},
steps: {
  type: Array,
  required: true
},
backdrop: {
  type: Boolean,
  default: false
},
autoStart: {
  type: Boolean,
  default: false
},
startDelay: {
  type: Number,
  default: 0
},
highlight: {
  type: Boolean,
  default: false
},
buttonLabels: {
  type: Object,
  default: () => {
    return {
      next: "Next",
      prev: "Back",
      finish: "Finish",
      skip: "Skip"
    };
  }
},
saveToLocalStorage: {
  type: String,
  default: 'end'
}

5. API methods:

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

6. Events.

• @onTourStart
• @onTourEnd

Preview:

Changelog:

v1.6.0 (03/27/2024)

• VTour: Added prop ‘backdrop’ to enable a backdrop / disabling controls
• Bug Fixes

v1.5.0 (01/04/2024)

• VTour: Added goToStep function
• Bug Fixes

v1.4.0 (12/28/2023)

• VTour: Added saveToLocalStorage prop

v1.3.9 (10/22/2023)

• Bugfixes

v1.3.6 (10/16/2023)

• Bugfix

v1.3.5 (05/22/2023)

• Bugfix

v1.3.4 (04/19/2023)

• component: Fixed error on first step / no highlight