Basic

<template>
  <div>
    <VOnboardingWrapper ref="wrapper" :steps="steps" />
    <span id="foo">Howdy, My Friend!</span>
    <button id="bar">Click me for no reason</button>
    <button @click="() => goToStep(1)">Click to go second step</button>
    <div>
      <button @click="start">Start Onboarding</button>
      <button @click="finish">Finish Onboarding</button>
    </div>
  </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!" }
      },
      {
        attachTo: { element: '#bar' },
        content: {
          title: "Do it!",
          description: "This is a description field and I really don't know what to write here..."
        }
      }
    ]

    return {
      wrapper,
      steps,
      start,
      finish,
      goToStep
    }
  }
})
</script>