Laravel Driver.js

Appearance

Blade Directives ​

Laravel Driver.js provides convenient Blade directives for including assets and rendering tours directly from your templates. These directives make it easy to integrate Driver.js into your Blade views without writing any PHP code.

@driverjsAssets ​

Includes the Driver.js CSS and JavaScript from the CDN. Add this directive to your layout's <head> section:

blade
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name') }}</title>

    <!-- Driver.js Assets -->
    @driverjsAssets

    <!-- Your other assets -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

This outputs:

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>

Note: When asset_source is set to "npm" in your config, this directive outputs nothing. You're expected to import Driver.js in your Vite bundle instead.

@driverjsTour('tour-name') ​

Renders a named tour only if it hasn't been completed yet. If the tour has already been completed by the current user, nothing is output.

blade
<body>
    @driverjsTour('onboarding')

    <!-- Your page content -->
</body>

Important: For this directive to render anything, the tour's steps must be defined before the directive is evaluated. If no steps have been registered for the tour, the directive outputs nothing (silent no-op). Register steps in a view composer or service provider — see the example below.

Example with View Composer ​

In your AppServiceProvider:

php
use RealRashid\LaravelDriverJs\Facades\DriverJs;
use Illuminate\Support\Facades\View;

public function boot(): void
{
    View::composer('dashboard', function ($view) {
        DriverJs::tour('onboarding')
            ->showProgress()
            ->step('#header', 'Welcome!', 'This is the dashboard.')
            ->step('#nav', 'Navigation', 'Navigate your app.')
            ->step('#content', 'Content', 'Your content area.');
    });
}

In your Blade template:

blade
@driverjsTour('onboarding')

@driverjsHighlight('#selector', 'Title', 'Description') ​

Renders a single-element highlight without navigation buttons. This is useful for spotlighting a specific feature on a page.

blade
<div id="new-feature">
    <!-- Your feature content -->
</div>

@driverjsHighlight('#new-feature', 'New Feature!', 'Check out this new feature we just added.')

Note: This directive is intended for one-off highlights. If you need multiple related highlights on the same page, prefer a named tour so navigation and completion tracking are explicit.

Conditional Rendering in Blade ​

For more control over when tours are rendered, you can use the tourCompleted() method in your Blade templates:

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

Don't forget to import the facade at the top of your template:

blade
@use('RealRashid\LaravelDriverJs\Facades\DriverJs')

That's it! You're now equipped to use Blade directives with Laravel Driver.js.