VueJS 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.

Prerequisites
Installation
Create a tour
Documentation
Something Missing?

Prerequisites

Installation

[!TIP] Looking for a nuxt version? Nuxt version (Special thanks to BayBreezy)

[!CAUTION] As of version 2.0.1, VueJS Tour has been rewritten in TypeScript. The VTour component is now a named export and must be imported as such. Please refer to the Documentation for more information on how to use VueJS Tour.

If you still want to use the old version, then this is the correct way to install it:

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.

Something Missing?

If you have a feature request or found a bug, let us know by submitting an issue.

GlobalHive / vuejs-tour

readme