Fast Guided Tour Plugin For Vue – Vue Tour

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.


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

    <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>
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 () {


Fast Guided Tour Plugin For Vue - Vue Tour

Download Details:

Author: pulsardev

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-tour --save

Add Comment