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

Click through nearby, distant, downward, and upward targets. Each move uses the same polished adaptive timing.

Friday, 29 August

Projects

Wetland Atlas

12 tasks

In progress

Solar Commons

8 tasks

In progress

Forest Archive

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'],
})

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.