fech-dev/vue-shepherd

A Vue wrapper for the site tour library Shepherd

vue-shepherd

vue-shepherd is built and maintained by Ship Shape. Contact us for web app consulting, development, and training for your project.

This is a Vue wrapper for the Shepherd, site tour, library.

Installation

NPM

npm install vue-shepherd --save

When using with a module system, you must explicitly install vue-shepherd via Vue.use():

import Vue from 'vue';
import VueShepherd from 'vue-shepherd';

Vue.use(VueShepherd);

Usage

You will need to import the styles first:

@import '~shepherd.js/dist/css/shepherd.css';

The plugin extends Vue with a set of directives and $shepherd() constructor function.

Constructor Function

<template>
  <div>
    Testing
  </div>
</template>

<script>
  export default {
    name: 'ShepherdExample',
    mounted() {
      this.$nextTick(() => {
        const tour = this.$shepherd({
          useModalOverlay: true
        });

        tour.addStep({
          attachTo: { element: this.$el, on: 'top' },
          text: 'Test'
        });

        tour.start();
      });
    }
  };
</script>

Directives

WIP