Styles

Learn about the styles available on the nuxt-tour module.

Default stylesheet

nuxt-tour injects a single tour.css file with sensible defaults. It uses CSS custom properties (--nt-*) so you can override any value without touching the source file or ejecting anything.

To disable the default stylesheet and supply your own:

ts

nuxt.config.ts

export default defineNuxtConfig({
  tour: { injectCSS: false },
});

Customising with CSS variables

All design tokens are declared on #nt-tooltip. Override whichever you need in your global CSS:

css

assets/css/tour-theme.css

#nt-tooltip {
  --nt-bg: #1e1e2e;
  --nt-text: #cdd6f4;
  --nt-subtext: #a6adc8;
  --nt-border-color: #45475a;
  --nt-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --nt-radius: 10px;

  --nt-btn-bg: #cba6f7;
  --nt-btn-color: #1e1e2e;
  --nt-btn-radius: 8px;

  --nt-highlight-color: #cba6f7;
}
No build step required
No Sass, no ejecting — just CSS. The variables are scoped to #nt-tooltip so they won't leak into the rest of your app.

CSS variable reference

--nt-border-color
Default#e2e8f0
Tooltip border and arrow border colour.
--nt-bg
Default#ffffff
Tooltip background colour.
--nt-text
Default#0f172a
Title and body text colour.
--nt-subtext
Default#64748b
Sub-text and progress counter colour.
--nt-highlight-color
Default#0ea5e9
Outline colour on the highlighted element.
--nt-radius
Default6px
Tooltip border radius.
--nt-shadow
Default0 2px 10px ...
Tooltip box shadow.
--nt-z-index
Default9999
Tooltip z-index.
--nt-max-width
Default370px
Maximum tooltip width.
--nt-padding
Default12px 16px
Tooltip inner padding.
--nt-gap
Default6px
Gap between header, body, and actions sections.
--nt-arrow-size
Default12px
Size of the Popper.js arrow.
--nt-highlight-offset
Default8px
outline-offset on the highlighted target element.
--nt-highlight-radius
Default4px
Border radius of the highlight outline.
--nt-backdrop-bg
Defaultrgba(0,0,0,0.5)
Backdrop overlay colour.
--nt-backdrop-z
Default9998
Backdrop z-index (should be one below --nt-z-index).
--nt-btn-bg
Default#020617
Next / Finish button background.
--nt-btn-color
Default#ffffff
Next / Finish button text colour.
--nt-btn-radius
Default5px
Button border radius.
--nt-btn-height
Default32px
Button height.
--nt-btn-padding
Default4px 14px
Button inner padding.
--nt-btn-font-size
Default14px
Button font size.
--nt-btn-font-weight
Default500
Button font weight.
--nt-btn-gap
Default6px
Gap between button icon and label.

Full default stylesheet

Emits

Learn about the events emitted by the nuxt-tour module.

Autostart

Start a tour automatically when the component mounts by passing the auto-start prop.