vue3-directive-shepherd
v2.0.1
Published
A Vue3 wrapper for the library Shepherd using Vue directives
Downloads
395
Maintainers
Readme
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 |