Nuxt and Vue integration

Nuxt convention

The module scans app/tours in every Nuxt layer. Each file default-exports one defineTour() result. The module generates one registry and TypeScript declarations from these definitions. A project file overrides a file with the same generated ID in a lower-priority layer.

const tour = useNuxtTour('onbo')
//                         ^ completes "onboarding"

await tour.goTo('cre')
//                    ^ completes only steps in that tour

The module auto-imports defineTour, useNuxtTour, and useTourTarget. It auto-registers TourHost. Import TourContent explicitly from the Vue entry when a custom card needs it. The Nuxt router adapter is automatic. The normal application does not configure a router bridge.

Nuxt module options stay small:

export interface ModuleOptions {
  targetTimeout?: number
  missingTarget?: 'skip' | 'error'
  css?: 'structure' | 'all' | false
}

These options are implemented. nuxtTour is the configuration key to avoid collisions with application code and other modules. The defaults are a 5000 ms timeout, missingTarget: 'error', and css: 'all'.

Pure Vue

The same definition and controller are available from @lupinum/nuxt-tour/vue:

app.use(createTourPlugin({
  tours: [onboarding],
  router,
}))

Pass Vue Router directly. The Vue integration waits for its navigation promise and Vue's next render tick. Nuxt uses a private adapter so it can also wait for page Suspense and page transitions to finish without exposing framework internals as public configuration.

The Vue entry does not use file discovery or generated application-specific IDs. Pass the definition to useTour(onboarding) to preserve its literal step IDs. Nuxt enhances the Vue runtime; it does not own a second runtime.

Server rendering

Each Vue or Nuxt application owns its controller and registries. The package does not store active state in a process-global singleton. The server renders no overlay or card. DOM work begins in the browser.

Tour definitions can contain functions and Vue components. The Nuxt module must not serialize them into the Nuxt payload. Generated registry modules import the definitions directly.

Build-time boundaries

File discovery, generated imports, and generated declarations belong to the Nuxt module. Tour execution, target resolution, and state belong to the shared Vue runtime. Rendering and positioning consume runtime state but do not decide navigation.