@routes Blade Directive

The @routes Blade directive outputs your Laravel routes as JavaScript, making them available to Ziggy’s route() helper function. Include it in your layout before your application’s JavaScript files.

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    @routes
</head>
<body>
    <!-- Your content -->
    <script src="/js/app.js"></script>
</body>
</html>

By default, this outputs a <script> tag containing both Ziggy’s route configuration and the route() helper function.

Parameters

string|array

Filter routes by group name(s). Groups are defined in your config/ziggy.php file.

{{-- Single group --}}
@routes('admin')

{{-- Multiple groups --}}
@routes(['admin', 'api'])

string

Add a nonce attribute to the generated script tag for Content Security Policy (CSP) compliance.

@routes(nonce: 'your-nonce-here')

Output:

<script nonce="your-nonce-here">...</script>

boolean

default:false

Output routes as JSON instead of JavaScript. Useful when using CSP or when you want to load the route() function separately.

@routes(json: true)

When json: true, the output is plain JSON without the route() helper function. You’ll need to import the route() function separately from ziggy-js.

Output Format

Default Output (JavaScript)

By default, @routes outputs a complete <script> tag:

<script>
    const Ziggy = {
        url: 'https://ziggy.test',
        port: null,
        defaults: {},
        routes: {
            'posts.index': {
                uri: 'posts',
                methods: ['GET', 'HEAD']
            },
            'posts.show': {
                uri: 'posts/{post}',
                methods: ['GET', 'HEAD'],
                parameters: ['post'],
                bindings: { post: 'id' }
            }
        }
    };
    
    // The route() helper function...
    function route(name, params, absolute, config) { /* ... */ }
</script>

JSON Output

With json: true, only the configuration is output:

<script>
    const Ziggy = {
        url: 'https://ziggy.test',
        port: null,
        defaults: {},
        routes: { /* ... */ }
    };
</script>

Multiple `@routes` Directives

If you include @routes multiple times on the same page, only the first directive includes the full route() function. Subsequent directives output a merge script that combines their routes with the existing configuration:

{{-- First directive: outputs full Ziggy --}}
@routes('public')

{{-- Later directives: merge additional routes --}}
@routes('admin')

This ensures the route() function is only loaded once while still allowing you to conditionally load different route groups.

Examples

Basic Usage

{{-- Load all routes (respecting config filters) --}}
@routes

Filter by Group

{{-- Load only admin routes --}}
@routes('admin')

Content Security Policy

{{-- With nonce for CSP --}}
@routes(nonce: $nonce)

{{-- Or output as JSON only --}}
@routes(json: true)

Conditional Loading

@auth
    {{-- Load authenticated user routes --}}
    @routes('authenticated')
@else
    {{-- Load guest routes only --}}
    @routes('guest')
@endauth

Configuration

You can customize the output format by setting the output class in config/ziggy.php:

return [
    'output' => [
        // Class for default script output
        'script' => \Tighten\Ziggy\Output\Script::class,
        
        // Class for JSON output
        'json' => \Tighten\Ziggy\Output\Json::class,
        
        // Class for merge script (subsequent @routes calls)
        'merge_script' => \Tighten\Ziggy\Output\MergeScript::class,
    ],
];

Implementation Details

The @routes directive is powered by the BladeRouteGenerator class, which:

Creates a new Ziggy instance with the specified group filter
Applies route filtering from your configuration
Outputs the appropriate format (script, JSON, or merge script)
Adds the nonce attribute if provided
Includes or excludes the route() function based on the skip-route-function config

The @routes directive exposes route names and URIs in your page’s HTML source. Ensure you use proper authentication and authorization on your routes, and consider using route filtering to limit which routes are exposed.

Ziggy Class

Learn about the Ziggy class that powers the @routes directive

Configuration

Configure route filtering and output options

JavaScript API

PHP API

@routes Blade Directive

Basic Usage

Parameters

Output Format

Default Output (JavaScript)

JSON Output

Multiple `@routes` Directives

Examples

Basic Usage

Filter by Group

Content Security Policy

Conditional Loading

Configuration

Implementation Details

Ziggy Class

Configuration

​Basic Usage

​Parameters

​Output Format

​Default Output (JavaScript)

​JSON Output

​Multiple @routes Directives

​Examples

​Basic Usage

​Filter by Group

​Content Security Policy

​Conditional Loading

​Configuration

​Implementation Details

​Related

Ziggy Class

Configuration

Basic Usage

Parameters

Output Format

Default Output (JavaScript)

JSON Output

Multiple `@routes` Directives

Examples

Basic Usage

Filter by Group

Content Security Policy

Conditional Loading

Configuration

Implementation Details

Related