Fast Guided Tour Plugin For Vue - Vue Tour

Install & Download:

# NPM
$ npm i vue-tour --save

Description:

A simple, lightweight, and customizable guided tour plugin for Vue.js.

Basic usage:

1. Import the Vue Tour component.

// vue
import Vue from 'vue'
// vue tour
import VueTour from 'vue-tour'
// stylesheet
@import './vue-tour/dist/vue-tour.css';

2. Register the component.

Vue.use(VueTour)

3. Add step information to the guided tour as follows:

<template>
  <div>
    <div id="v-step-0">The First Step</div>
    <div class="v-step-1">The Second Step</div>
    <div data-v-step="2">The Last Step.</div>
    <v-tour name="myTour" :steps="steps"></v-tour>
  </div>
</template>

export default {
  name: 'my-tour',
  data () {
    return {
      steps: [
        {
          target: '#v-step-0',
          header: {
            title: 'Step 1',
          },
          content: `This is <strong>Step 1</strong>!`
        },
        {
          target: '.v-step-1',
          content: `This is <strong>Step 2</strong>!`
        },
        {
          target: '[data-v-step="2"]',
          content: `This is <strong>Step 3</strong>!`
          params: {
            placement: 'top'
          }
        }
      ]
    }
  },
  mounted: function () {
    this.$tours['myTour'].start()
  }
}