Skip to content
A Vue wrapper for the site tour library Shepherd
HTML JavaScript
Branch: master
Clone or download
Latest commit 556573c Aug 26, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Add example to README Aug 25, 2019
dist Add dist Aug 25, 2019
docs Initial setup Aug 25, 2019
public Initial setup Aug 25, 2019
src Initial setup Aug 25, 2019
.gitignore Initial setup Aug 25, 2019
CHANGELOG.md Initial setup Aug 25, 2019
LICENSE Initial setup Aug 25, 2019
README.md Add example to README Aug 25, 2019
babel.config.js init Feb 9, 2019
package.json Adjust scripts Aug 25, 2019
yarn.lock Yarn upgrade Aug 25, 2019

README.md

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 Greenkeeper badge

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

It also aims to provide additional functionality on top of Shepherd.

Installation

npm install vue-shepherd --save

Usage

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

You can’t perform that action at this time.