Skip to main content

Getting started

Install Nuxt Tour and build a typed first journey.

Build your first tour

Nuxt Tour provides accessible, route-aware product tours with a Vue-native API and a Nuxt-first developer experience.

Try the actual library

Try step navigation, interactive targets, and scrolling in a Nuxt project workspace.

Nuxt workspace

Projects

Nuxt starter

12 tasks

In progress

Component library

8 tasks

In progress

Documentation site

Complete

Completed
app/tours/onboarding.tstarget: 'new-project', interaction: 'target'

Keyboard navigation, focus management, dark mode, and reduced motion are built in.

Install

bash
pnpm add @lupinum/nuxt-tour
ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-tour'],
})

To let a coding agent such as Claude Code, Codex or Cursor build tours with the documentation of your installed version, follow AI coding agents.

Define

Nuxt discovers every default export in app/tours. The file path is the tour ID, so app/tours/onboarding.ts must export id: 'onboarding'.

ts
// app/tours/onboarding.ts
export default defineTour({
  id: 'onboarding',
  steps: [
    {
      id: 'welcome',
      title: 'Welcome',
      content: 'Let’s take a quick look around.',
    },
    {
      id: 'create-project',
      route: '/projects',
      target: 'create-project',
      title: 'Create a project',
      content: 'Everything starts here.',
      placement: 'bottom-start',
    },
  ],
})

Render and start

Render one host near the application root. Use a semantic target name instead of a selector tied to CSS or DOM structure.

vue
<script setup lang="ts">
const onboarding = useNuxtTour('onboarding')
</script>

<template>
  <button v-tour-target="'create-project'">
    Create project
  </button>
  <button @click="onboarding.start()">
    Show me around
  </button>
  <TourHost />
</template>

start() resolves after the first card is positioned and focused. Route-aware steps wait for Nuxt page settlement and late-rendered targets before they show.

Continue with the interactive recipes, Public API, and Runtime semantics.

Questions? Ask in the Lupinum OSS Discord.