Examples
Real-world usage examples for the useDriver composable.
Basic Tour
A simple multi-step tour that starts when the component mounts and marks itself as played on completion.
components/OnboardingTour.vue
<script setup lang="ts">
const { start } = useDriver("onboarding");
onMounted(() => {
start({
showProgress: true,
animate: true,
steps: [
{
element: "#welcome",
popover: {
title: "Welcome",
description: "Thanks for joining! Let us show you around.",
side: "bottom",
},
},
{
element: "#nav",
popover: {
title: "Navigation",
description: "Use the sidebar to move between sections.",
side: "right",
},
},
{
element: "#settings",
popover: {
title: "Settings",
description: "Customise your experience here.",
side: "top",
},
},
],
});
});
</script>
Auto-Skip Tour
Show the tour only on a user's first visit. On subsequent visits start() is silently skipped.
components/FeatureTour.vue
<script setup lang="ts">
const { start } = useDriver("new-features-v2", { autoSkip: true });
onMounted(() => {
start({
steps: [
{
element: "#new-dashboard",
popover: {
title: "New Dashboard",
description: "We redesigned the dashboard — here is what changed.",
},
},
],
});
});
</script>
Restart Button
Allow the user to replay a tour from a help menu or settings page.
components/HelpMenu.vue
<script setup lang="ts">
const { restart } = useDriver("onboarding");
const steps = [
{
element: "#welcome",
popover: { title: "Welcome", description: "This is the beginning." },
},
];
</script>
<template>
<button @click="restart({ steps })">Replay introduction tour</button>
</template>
Check Played State
Conditionally show a banner only for users who have not seen the tour yet.
components/TourBanner.vue
<script setup lang="ts">
const { isPlayed, start } = useDriver("dashboard-intro");
const showBanner = computed(() => !isPlayed());
const steps = [
{ element: "#chart", popover: { title: "Your chart", description: "Live data here." } },
];
</script>
<template>
<div v-if="showBanner" class="banner">
<p>New here? Take a quick tour.</p>
<button @click="start({ steps })">Start tour</button>
</div>
</template>
Reset on Logout
Clear all tour state when a user logs out so the next user gets the full experience.
composables/useAuth.ts
export function useAuth() {
const onboardingTour = useDriver("onboarding");
const featureTour = useDriver("new-features-v2");
function logout() {
onboardingTour.clear();
featureTour.clear();
// ...rest of logout logic
}
return { logout };
}