Nearly Perpendicular Macaroons

    vue-shepherd

    0.2.1 • Public • Published

    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

    Install

    npm i vue-shepherd

    DownloadsWeekly Downloads

    4,443

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    12.7 kB

    Total Files

    9

    Last publish

    Collaborators

    • rwwagner90