shipshapecode
vue-shepherd
This is a Vue wrapper for the Shepherd, site tour, library.
npm install vue-shepherd --saveUsage
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