Use Nuxt Tour in Nuxt

Add @lupinum/nuxt-tour to modules, place one <TourHost /> near the root of the application, and define tours in app/tours.

Configuration

export default defineNuxtConfig({
  modules: ['@lupinum/nuxt-tour'],
  nuxtTour: {
    targetTimeout: 5000,
    missingTarget: 'error',
    css: 'all',
  },
})

• targetTimeout is a finite number of milliseconds. A target can override it.
• missingTarget is error or skip.
• css is all, structure, or false.

The module auto-imports defineTour, useNuxtTour, and useTourTarget. It registers TourHost. It deliberately does not auto-import the plain Vue useTour name or register internal rendering components, which avoids common module collisions.

Routes and pages

Put a route on the destination step:

{
  id: 'billing',
  route: { name: 'settings-billing', query: { plan: 'team' } },
  target: 'plan-picker',
  title: 'Choose a plan',
  content: 'Select the plan that fits your team.',
}

Nuxt Tour confirms Vue Router navigation, waits for the destination <NuxtPage> Suspense cycle when one starts, and then waits for the semantic target. Query and hash updates that reuse the current page do not wait for a page transition that Nuxt never creates. A navigation outside the tour, including browser Back, cancels the active or starting session.

Layers

Every Nuxt layer can provide app/tours. Higher-priority application files override lower-layer files with the same generated path ID. Other layer tours merge into one generated registry. The file path and the exported id must match.

Server rendering

Definitions and generated types are safe during build and server rendering. The active runtime, DOM observers, positioning, focus, and Teleport begin only after client mount. Definitions are imported directly and are not serialized through the Nuxt payload.