Laravel Driver.js

Appearance

Including Assets ​

Laravel Driver.js needs the Driver.js CSS and JavaScript to be loaded on your page before it can render tours. The package supports multiple ways to include these assets.

CDN Method (Default) ​

The simplest method — just add the @driverjsAssets directive to your layout:

blade
<head>
    @driverjsAssets
</head>

This outputs the Driver.js CSS link and JavaScript script tag from the jsDelivr CDN:

html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.4.0/dist/driver.css">
<script src="https://cdn.jsdelivr.net/npm/driver.js@1.4.0/dist/driver.js.iife.js"></script>

Customizing the CDN Version ​

Set the version in your .env file:

dotenv
DRIVERJS_VERSION=1.4.0

Or use latest to always get the newest version:

dotenv
DRIVERJS_VERSION=latest

Custom CDN URLs ​

If you're using a custom CDN or self-hosting the files, you can override the URLs:

dotenv
DRIVERJS_CDN_JS_URL=https://your-cdn.com/driver.js
DRIVERJS_CDN_CSS_URL=https://your-cdn.com/driver.css

NPM Method ​

If you prefer to bundle Driver.js with your Vite build, set the asset source to npm:

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

Or via .env:

dotenv
DRIVERJS_ASSET_SOURCE=npm

Then install the package:

bash
npm install driver.js

Import it in your resources/js/app.js:

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 } };

When using the NPM method, the @driverjsAssets directive outputs nothing and renderAssetLinks() returns an empty string (since you're bundling the assets yourself).

Custom Method ​

If you want full control over asset loading, set the asset source to custom:

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

The package will not inject any scripts or stylesheets. You're responsible for including the Driver.js library on your own.

Rendering Assets Manually ​

If you need to render the asset links outside of a Blade directive:

php
$assetLinks = app('driverjs')->renderAssetLinks();

This returns the HTML string containing the <link> and <script> tags when asset_source is cdn. For npm and custom, it returns an empty string.

Important Notes ​

  • The CDN method loads Driver.js globally as window.driver.js.driver, which is what the generated JavaScript uses to create driver instances.
  • When using the NPM method, you must expose the driver on window.driver.js.driver for the generated JavaScript to work correctly.
  • The render() method automatically includes asset links when asset_source is cdn. Use toScriptTag() or toJavaScript() if you want to render only the tour script without asset links.

That's it! You're now equipped to include Driver.js assets using Laravel Driver.js.