Minimal Guided Tour Component For Vue 3

Install & Download:

Description:

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