vue3-directive-shepherd

This is a Vue3 wrapper for the Shepherd using Vue directives

Installation

npm install vue3-directive-shepherd

Usage

Add plugin

import { createApp } from 'vue';
import Vue3DirectiveShepherd from 'vue3-directive-shepherd';
import 'shepherd.js/dist/css/shepherd.css';
import router from "./router";

const options = {
  router,
  tourMap: {
    myCustomTour: {
      useModalOverlay: true,
    }
  }
}

const app = createApp({})
app.use(router)
app.use(Vue3DirectiveShepherd, options)
app.mount('#app')

Init Options

key	description	options
router	Instance of VueRouter	Router
tourMap	Map of tours. Key is a name of tour. Value is Tour options	key: String, value: Shepherd.Tour.TourOptions

Use directive v-tour-step:[stepNumber]="directiveOptions"

<template>
  <div>
    <some-component
      v-tour-step:1="{
        tour: myCustomTour,
        options: {
          attachTo: { on: 'bottom' },
          text: 'Test',
          buttons: [
            {
              text: 'Next',
              action: myCustomTour.next,
            },
          ],
        }
      }"
    >
        First Step
    </some-component>
    <some-component
      v-tour-step:2="{
        tour: myCustomTour,
        options: {
          attachTo: { on: 'top' },
          text: 'Test2',
          buttons: [
            {
              text: 'Stop',
              action: myCustomTour.cancel,
            },
          ],
        }
      }"
    >
        Second Step
    </some-component>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    mounted(){
      this.myCustomTour.start();
    }
  });
</script>

Directive Options

key	description	options
tour	Instance of Shepherd Tour. Available as a global property in VueComponent	Shepherd.Tour
options	Step options	Step.StepOptions

Note: In options attachTo.element is not required as it is filled in inside the directive

Composition API

<script>
  import { defineComponent, inject, onMounted } from 'vue'

  export default defineComponent({
    setup() {
      const tour = inject('myCustomTour');
      onMounted(() => {
        tour.start();
      });
      return { tour };
    }
  });
</script>

routerPush

A new routerPush method has been added to Tour. It can be used when moving between routes

<some-component
  v-tour-step:3="{
    tour: myCustomTour,
    options: {
      attachTo: { on: 'bottom' },
      text: 'Test2',
      beforeShowPromise,
      buttons: [
        {
          text: 'Next',
          action: () => {
            myCustomTour.routerPush({name: 'myNextRoute'}, myCustomTour.next)
          },
       },
    ],
  }
  }"
/>

routerPush Options

key	description	options
route	route location	RouteLocationRaw
cb	The function that will be called at the end of the routing	() => void

Demo

Codesanbox example

Demo Quasar with TSX

Codesanbox example