A simple yet fully configurable guided tour component for your next Vue 3 projects.
How to use it:
1. Install and register the Guided Tour.
import { createApp } from 'vue'
import App from './App.vue'
import VueGuidedTour from 'vue-guided-tour'
import 'vue-guided-tour/style.css'
const app = createApp(App)
app.use(VueGuidedTour)
app.mount('#app')
2. Add the component to the template.
<template> ... <vue-guided-tour :steps="steps" /> </template>
3. Assign steps to your components & elements.
export default {
data() {
return {
steps: [
{
target: '#step-1',
content: 'Step 1 content',
title: 'OPTIONAL Title',
slot: 'Step slot for dynamic content',
padding: 0,
popover: {
position: 'bottom',
placement: 'start',
offset: 0,
arrow: true,
autoAdjust: true
width: '250px',
id: 'hello-world',
},
onBeforeNext: () => {
}
onBeforePrev: () => {
}
},
{
target: '.step-2',
content: 'Step 2 content',
},
{
target: '#step-3',
content: 'Step 3 content',
},
// ...
],
}
},
}
4. Available props.
steps: {
type: Array as PropType<Step[]>,
required: true,
default: () => [],
},
stepIndex: {
type: Number,
default: -1,
},
padding: {
type: Number,
default: 0,
},
useOverlay: {
type: Boolean,
default: true,
},
pagination: {
type: Boolean,
default: true,
},
closeBtn: {
type: Boolean,
default: true,
},
allowKeyboardEvent: {
type: Boolean,
default: true,
},
name: {
type: String,
default: undefined,
},
// overlay options
allowOverlayClose: {
type: Boolean,
default: true,
},
allowEscClose: {
type: Boolean,
default: true,
},
allowInteraction: {
type: Boolean,
default: true,
},
// popover options
arrow: {
type: Boolean,
default: true,
},
offset: {
type: Number,
default: 0,
},
position: {
type: String as PropType<Exclude<PopoverOptions['position'], undefined>>,
default: 'bottom', // 'top', 'left', 'right', 'bottom'
validator: function (value: any) {
return position.indexOf(value) !== -1
},
},
placement: {
type: String as PropType<Exclude<PopoverOptions['placement'], undefined>>,
default: 'start', // 'start', 'center', 'end'
validator: function (value: any) {
return placement.indexOf(value) !== -1
},
},
autoAdjust: {
type: Boolean,
default: true,
},
width: {
type: [String, Number],
default: 250,
},
5. API methods.
$vgt.start(index) $vgt.next() $vgt.prev() $vgt.end() $vgt.move(index)
6. Events.
- @after-start
- @after-end
- @after-move
Preview:
Changelog:
v0.5.0 (10/26/2023)
- Update
Download Details:
Author: yaminncco
Live Demo: https://yaminncco.github.io/vue-guided-tour/
Download Link: https://github.com/yaminncco/vue-guided-tour/archive/refs/heads/main.zip
Official Website: https://github.com/yaminncco/vue-guided-tour
Install & Download:
