ThimoDEV/nuxt-tour

Empower your users with interactive guided tours of your Nuxt 3 applications using the nuxt-tour module. With this module, developers can seamlessly integrate step-by-step tooltips into their applications, providing clear instructions and highlighting key features.

Nuxt Tour

Empower your users with interactive guided tours of your Nuxt 3 applications using the nuxt-tour module.

With this module, developers can seamlessly integrate step-by-step tooltips into their applications, providing clear instructions and highlighting key features.

Special thanks to Vue Tour for doing the heavy lifting. I basically just ported it to Nuxt 3(with a few changes here and there).

Thank you https://github.com/GlobalHive

• 📖  Documentation
• ✨  Release Notes

Features

• Easy Integration: Quickly add guided tours to your Nuxt 3 projects with minimal setup.
• Customizable: Tailor the appearance of steps to match your application's design and user experience.
• Step-by-Step Navigation: Guide users through workflows and features with sequential tooltips and intuitive navigation controls.
• Rich Content Support: Enhance tooltips with text, images, videos, and interactive elements through the provided slots.
• Responsive Design: Ensure a consistent experience across devices with responsive tooltips that adapt to different screen sizes.

Quick Setup

Install the module to your Nuxt application with one command:

npm install nuxt-tour

Then, add the module to your nuxt.config file:

export default defineNuxtConfig({
  modules: ["nuxt-tour"],
});

You can then pass a prefix to the module via the tour key in your nuxt.config file. You can also pass the injectSass key to inject the default styles into your application:

export default defineNuxtConfig({
  modules: ["nuxt-tour"],
  tour: {
    prefix: "tour",
  },
});

Configure the module

You can configure the module by passing the following options to the tour key in your nuxt.config file:

export interface TourOptions {
  /**
   * The prefix to use for the component name
   *
   * @default "V"
   */
  prefix?: string;
  /**
   * Inject the default sass file
   *
   * Feel free to create your own 🙂. Just get the class names correct
   *
   * @default true
   */
  injectSass?: boolean;
}

That's it! You can now use Nuxt Tour in your Nuxt app ✨

Contribution

Local development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release