@docentjs/vue

@docentjs/vue

Vue 3 bindings for Docent, a guided product tour library.

pnpm add @docentjs/vue

One install is enough: defineTour, the types, and @docentjs/vue/themes all come from this package.

<script setup lang="ts">
import { useTour } from '@docentjs/vue'
import { welcomeTour } from './tours'

const tour = useTour(welcomeTour)
</script>

<template>
  <button @click="tour.start()">Take the tour</button>
</template>

Your own popover

<script setup lang="ts">
import { TourPopover, useTour } from '@docentjs/vue'
const tour = useTour(welcomeTour, { popover: true })
</script>

<template>
  <TourPopover :tour="tour" v-slot="{ ctx }">
    <Card :ctx="ctx" />
  </TourPopover>
</template>

Many tours

const docent = useDocent({ tours: [welcome, invoices] })
docent.identify(user.id, { plan: user.plan })

Tours start from their own triggers, conditions and frequency. <TourPopover :tour="docent"> works with it too.

Also provideDocentDefaults() to share renderer defaults, identity, storage and sink.

MIT