Vue.js Tour

VueJS Tour is a lightweight, simple and customizable tour plugin. It provides a quick and easy way to guide your users through your application.

Demo

Prerequisites

Installation

This section will guide you through the process of installing VueJS Tour.

  • Step 1: Go to your project directory and install VueJS Tour using npm:
cd my-project
npm install @globalhive/vuejs-tour
  • Step 2: Import the plugin in your application entry point (typically main.js):
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");

Everything is ready! Now you can use VueJS Tour in your application.
Make sure to check out the documentation for more information.

Create a tour

Add the VueJS Tour component anywhere in your app. It is recommended to add it to App.vue and create the required steps using <script setup> syntax.

<template>
  <div>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour :steps="steps"/>
  </div>
</template>

<script setup>
const steps = [
  {
    target: '#selectByID',
    content: 'This is the first step',
  },
  {
    target: '.selectByClass',
    content: 'This is the second step, placed on the bottom of the target',
    placement: 'bottom',
  },
  {
    target: '[data-step="3"]',
    content: 'This is the third step',
  }
];
</script>

Start the tour

To start the tour, you can use the autoStart prop...

<template>
  <div>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour :steps="steps" autoStart/>
  </div>
</template>

<script setup>
const steps = [...];
</script>

...or call the startTour() method on the component instance.

<template>
  <div>
    <div id="selectByID">Selected by its id 'selectByID'</div>
    <p class="selectByClass">Telected by its class 'selectByClass'</p>
    <button data-step="3">Selected by the 'data-step="3"' attribute</button>

    <VTour ref="tour" :steps="steps"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const tour = ref(null);

const steps = [...];

onMounted(() => {
  tour.value.startTour();
});
</script>

The target property of the step object can be any valid CSS selector.

Documentation

For more information about the available props and methods, check out the documentation.