Nuxt Driver | Driver.js Nuxt Module

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]

A Nuxt 3 module that brings the powerful Driver.js library to your Nuxt applications. Create beautiful, interactive product tours, feature highlights, and user onboarding flows with minimal effort. The module provides a declarative and programmatic API, supporting both CSS selectors and Vue template refs for maximum flexibility. With built-in TypeScript support, reactive state management, and a rich set of features, you can create engaging user experiences while maintaining full control over the tour flow and appearance.

- ✨  Release Notes

Features

- 🎨 Fully Typed: Complete TypeScript support with type definitions
- 🔌 Auto-import: Driver.js components and composables are auto-imported
- 🛠️ Flexible API: Choose between declarative and programmatic usage
- 🔄 Reactive State: Track tour progress and state with reactive properties
- 🎯 Multiple Targeting: Use CSS selectors or template refs to target elements
- 🎭 Custom Components: Built-in Tour component with slot support
- ✨ Directive Support: v-step and v-highlight directives for easy integration
- 🔄 Progress Tracking: Built-in progress indicators for multi-step tours
- 🎨 Customizable: Full access to Driver.js configuration options

Quick Setup

1. Add the module to your Nuxt project:

``bash
npx nuxi module add nuxt-driver
`

2. The module will automatically register the necessary components and composables.

Usage

$3

The useDriver composable provides programmatic control over tours. There are two ways to use it:

#### Method 1: With CSS Selectors
`vue



`

#### Method 2: With Template Refs
`vue



`

$3

The Tour component provides a declarative way to create tours using the v-step directive. Note: The v-step directive can only be used inside a Tour component.

`vue

`

$3

Highlight important elements anywhere in your app:

`vue



`

Available Properties and Methods

#### useDriver Return Value
- drive(stepIndex?): Start the tour or go to a specific step
- isActive: Whether the tour is currently active
- state: Current driver.js state
- hasNextStep: Whether there's a next step
- hasPreviousStep: Whether there's a previous step
- activeIndex: Current step index
- activeStep: Current step configuration
- previousStep: Previous step configuration
- activeElement: Currently highlighted DOM element
- previousElement: Previously highlighted DOM element

#### Tour Component
- Props:
- steps: Array of step configurations (alternative to using v-step)
- All other Driver.js configuration options are supported
- Slot Props:
- drive: Function to start the tour
- isActive: Boolean indicating if tour is active
- activeStep: Current active step configuration
- activeIndex: Current step index
- All other state properties from useDriver`

$3

This module is built on top of the amazing Driver.js library by Kamran Ahmed.

Driver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive user's focus across the page. It's MIT licensed and can be found at driverjs.com.

[npm-version-src]: https://img.shields.io/npm/v/nuxt-driverjs/latest.svg?style=flat&colorA=020420&colorB=00DC82
[npm-version-href]: https://www.npmjs.com/package/nuxt-driver

[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-driverjs.svg?style=flat&colorA=020420&colorB=00DC82
[npm-downloads-href]: https://www.npmjs.com/package/nuxt-driver

[license-src]: https://img.shields.io/npm/l/nuxt-driverjs.svg?style=flat&colorA=020420&colorB=00DC82
[license-href]: https://www.npmjs.com/package/nuxt-driver

[nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
[nuxt-href]: https://nuxt.com