vue-shepherd
vue-shepherd
This is a Vue wrapper for the Shepherd, site tour, library.
npm install vue-shepherd --save
Usage
Composition API (suggested)
<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'
});
}
},
created(){
this.createTour();
},
mounted(){
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
Dependencies
Dependencies
@babel/eslint-parser: ^7.21.3@rollup/plugin-alias: ^4.0.3@rollup/plugin-commonjs: ^24.0.1@rollup/plugin-node-resolve: ^15.0.1@rollup/plugin-replace: ^5.0.2@vue/cli-plugin-babel: ^5.0.8@vue/cli-plugin-e2e-cypress: ^5.0.8@vue/cli-plugin-eslint: ^5.0.8@vue/cli-service: ^5.0.8@vue/compat: ^3.2.47@vue/compiler-sfc: ^3.2.45cross-env: ^7.0.2cypress: ^12.9.0eslint: ^8.37.0eslint-plugin-vue: ^9.10.0minimist: ^1.2.8release-it: ^15.10.1release-it-lerna-changelog: ^5.0.0rollup: ^2.79.1rollup-plugin-babel: ^4.4.0rollup-plugin-filesize: ^10.0.0rollup-plugin-peer-deps-external: ^2.2.4rollup-plugin-terser: ^7.0.2rollup-plugin-vue: ^6.0.0vue: ^3.2.47vue-eslint-parser: ^9.1.1