Laravel Driver.js

Appearance

Using with Vite/NPM ​

If you prefer to bundle Driver.js with your Vite build instead of loading it from the CDN, Laravel Driver.js fully supports this approach. Here's how to set it up.

Step 1: Configure Asset Source ​

Set asset_source to "npm" in your configuration:

php
// config/driverjs.php
'asset_source' => 'npm',

Or via .env:

dotenv
DRIVERJS_ASSET_SOURCE=npm

When set to "npm", the @driverjsAssets directive outputs nothing, renderAssetLinks() returns an empty string, and the render() method only outputs the tour script (no CDN links).

Step 2: Install Driver.js via NPM ​

bash
npm install driver.js

Or with pnpm:

bash
pnpm add driver.js

Or with yarn:

bash
yarn add driver.js

Step 3: Import in Your JavaScript ​

Add the following to your resources/js/app.js (or wherever your main JavaScript entry point is):

javascript
import { driver } from "driver.js";
import "driver.js/dist/driver.css";

// Make the driver available globally for Laravel Driver.js
window.driver = { js: { driver } };

The window.driver.js.driver global is required because the JavaScript code generated by Laravel Driver.js references window.driver.js.driver() to create driver instances.

Step 4: Include in Your Vite Build ​

If you're using Laravel's default Vite setup, the import in app.js is enough. Vite will automatically bundle the Driver.js CSS and JavaScript with your other assets.

Your vite.config.js doesn't need any special configuration:

javascript
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Step 5: Include Vite Assets in Your Layout ​

blade
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Since asset_source is set to "npm", the @driverjsAssets directive is not needed (and outputs nothing).

Rendering Tours ​

Everything works the same — just call render() or use Blade directives:

blade
{!! DriverJs::tour('onboarding')
    ->showProgress()
    ->step('#header', 'Welcome!')
    ->step('#nav', 'Navigation')
    ->render() !!}

Since the Driver.js library is already loaded by your Vite bundle, the render() method will only output the tour initialization script (no duplicate CDN links).

Version Management ​

When using NPM, the Driver.js version is managed through your package.json, not the driverjs.version config option. To update:

bash
npm update driver.js

That's it! You're now equipped to use Laravel Driver.js with Vite/NPM.