Nuxt starter
12 tasks
Show people around. Keep Nuxt feeling like Nuxt.
Accessible, route-aware product tours with typed definitions, semantic targets, and defaults you can trust.
pnpm add @lupinum/nuxt-tour
export default defineTour({
id: 'onboarding',
steps: [{
id: 'create-project',
route: '/projects',
target: 'new-project',
title: 'Create your first project',
content: 'Start here, then invite your team.',
}],
})<template>
<button v-tour-target="'new-project'">
New project
</button>
</template><script setup lang="ts">
const onboarding = useNuxtTour('onboarding')
</script>
<template>
<button @click="onboarding.start()">
Show me around
</button>
</template>Try the actual library
Try step navigation, interactive targets, and scrolling in a Nuxt project workspace.
Nuxt workspace
Projects
In progress
Component library
8 tasks
Documentation site
Complete
app/tours/onboarding.ts
target: 'new-project', interaction: 'target'Keyboard navigation, focus management, dark mode, and reduced motion are built in.
From first tour to product-ready patterns.
Run focused recipes for rich media, live controls, Vue refs, route changes, conditional steps, and custom cards.
Open the interactive recipe lab- Images and Vue components
- Routes and dynamic targets
- Interaction and focus
- Themes and custom cards