nuxt-tour v0.0.8

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;
  /**
   * The prefix to use for the nuxt-icon-tw component
   *
   * These icons can be displayed on the buttons of the tour
   *
   * @see Iconify https://icones.js.org/ for all eligible icons
   *
   * @see https://nuxt.com/modules/icon-tw for module options
   *
   * @default ""
   */
  iconPrefix?: string;
}

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

Contribution