Usage

Learn how to use v-onboarding in your Vue application.

Create a steps array

const steps = [
  { attachTo: { element: '#foo' }, content: { title: "Welcome!" } }
]

See Step for available options

Create a ref to pass to the VOnboardingWrapper component and useVOnboarding composable

const wrapper = ref(null)
const { start, goToStep, finish } = useVOnboarding(wrapper)

<template>
  <VOnboardingWrapper ref="wrapper" :steps="steps" />
  <div>
    <button id="foo">Welcome</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue'
import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding'
import 'v-onboarding/dist/style.css'
export default defineComponent ({
  components: {
    VOnboardingWrapper
  },
  setup() {
    const wrapper = ref(null)
    const { start, goToStep, finish } = useVOnboarding(wrapper)
    const steps = [
      { attachTo: { element: '#foo' }, content: { title: "Welcome!" } }
    ]

    return {
      wrapper,
      steps
    }
  }
})
</script>

You can now start the onboarding by calling start function in onMounted or in another function

onMounted(() => start())

Please check out the Advanced Usage if you want to customize the step UI

Installation

Advanced Usage