Customizable Onboarding (Guided Tour) Component For Vue 3

A super-slim, highly customizable, fully-typed onboarding plugin that helps guide your visitors through your application.

How to use it:

1. Import and register the onboarding plugin.

import { defineComponent, ref, onMounted } from 'vue'
import { VOnboardingWrapper } from 'v-onboarding'
import 'v-onboarding/dist/style.css'

export default defineComponent ({
  components: {
    VOnboardingWrapper
  },
  // ...
})

2. Add the VOnboardingWrapper component to the template and define your own steps as follows:

<template>
  <VOnboardingWrapper ref="wrapper" :steps="steps" />
  <div>
    <button id="example">Start</button>
  </div>
</template>

export default defineComponent ({
  components: {
    VOnboardingWrapper
  },
  setup() {
    const wrapper = ref(null)
    const steps = [
      {
        attachTo: {
          el: '#example'
        },
        content: {
          title: "Step 1",
          description: "This is step 1"
        },
        on: { // callbacks
         before: function() {}, 
        after: function() {} 
        },
        options: {} // options
      }
    ]
    onMounted(() => {
      if (wrapper.value) {
        wrapper.value.start()
      }
    })
    return {
      wrapper,
      steps
    }
  }
})

3. Available step options.

{
  popper: {
    modifiers: [
      {
        name: "offset",
        options: {
          offset: [0, 10],
        },
      }
    ]
  },
  disableOverlay: false,
  scrollToStep: {
    enabled: true,
    options: {
      behavior: 'smooth',
      block: 'center',
      inline: 'center'
    }
  }
}

4. API methods.

// start
start();
// finish
finish()
// go to a specific step
goToStep(3)
goToStep(current => current + 1);

Preview:

Changelog:

v2.5.1 (05/21/2023)

• bugfixes

v2.4.0 (05/09/2023)

• added new dynamic CSS variables

v2.3.2 (04/24/2023)

• fixed an issue that step wasn’t get attached to correct element

v2.3.1 (02/22/2023)

• vonboardingstep.vue: removed misplaced attribute

v2.3.0 (02/19/2023)

• Separated finish and exit events. exposed exit method
• Bug Fixes

v2.2.1 (12/11/2022)

• fixed an issue that exit event wasn’t being emitted when onboarding finished with Finish button

v2.2.0 (11/13/2022)

• New configuration options

v2.1.0 (08/28/2022)

• add an option to provide button labels for the default UI

v2.0.1 (08/01/2022)

• usesvgoverlay.ts: fixed multiple event listener issue

v2.0.0 (07/23/2022)

• feat: added padding and borderRadius options to overlay element

v1.2.3 (07/02/2022)

• vonboardingstep.vue: fixed an issue where finish button was throwing an error on the last step

Download Details:

Author: fatihsolhan

Live Demo: https://v-onboarding.fatihsolhan.com/

Download Link: https://github.com/fatihsolhan/v-onboarding/archive/refs/heads/main.zip

Official Website: https://github.com/fatihsolhan/v-onboarding

Install & Download:

# Yarn
$ yarn add v-onboarding

# NPM
$ npm i v-onboarding