shipshapecode/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.

npm install vue-shepherd --save

Usage

Composition API (suggested)

First, in your main.js, import the styles

import 'shepherd.js/dist/css/shepherd.css'

Then, use shepherd in your components:

<template>
  <div ref="el">
    Testing
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  import { useShepherd } from 'vue-shepherd'

  const el = ref(null);

  const tour = useShepherd({
    useModalOverlay: true
  });
  
  onMounted(() =>  {
    tour.addStep({
      attachTo: { element: el.value, on: 'top' },
      text: 'Test'
    });

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

Option API

To use vue-shepherd with Option API you have to install the plugin which will add the '$shepherd' function to your vue app.

import { createApp } from 'vue';
import VueShepherdPlugin from 'vue-shepherd';
import '~shepherd.js/dist/css/shepherd.css';

createApp().use(VueShepherdPlugin).mount('#app');

<template>
  <div ref="el">
    Testing
  </div>
</template>

<script>
  import { defineComponent } from 'vue'

  export default defineComponent({
    data(){
      return {
        tour: null
      }
    },

    methods: {
      createTour(){
        this.tour = this.$shepherd({
          useModalOverlay: true
        });

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

    mounted(){
      this.createTour();
      this.tour.start();
    }
  });
</script>

SSR

For server side rendering project, you should import the vue-shepherd.ssr.js file.

import VueShepherd from 'vue-shepherd/dist/vue-shepherd.ssr.js';

Directives

WIP