Customizable Onboarding (Guided Tour) Component For Vue 3

Install & Download:

# Yarn
$ yarn add v-onboarding
# NPM
$ npm i v-onboarding

Description:

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:

Customizable Onboarding (Guided Tour) Component For Vue 3

Changelog:

v2.8.1 (03/24/2024)

fixed missing typescript declaration file

v2.8.0 (02/10/2024)

update

v2.7.0 (02/10/2024)

added an option to hide next step while beforeStep hook is executing
v-html support (optional)
z-index of wrapper and step elements are can be updated by css variables with this update

v2.6.0 (10/24/2023)