Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
dev
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue-shepherd

Ship Shape

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

npm version Download count all time npm Build Status Code Climate Test Coverage

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