> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/tighten/ziggy/llms.txt
> Use this file to discover all available pages before exploring further.
# @routes Blade Directive
> Generate JavaScript route configuration using the @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
```blade theme={null}
My App
@routes
```
By default, this outputs a `
```
Output routes as JSON instead of JavaScript. Useful when using CSP or when you want to load the `route()` function separately.
```blade theme={null}
@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 `
```
### JSON Output
With `json: true`, only the configuration is output:
```html theme={null}
```
## 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:
```blade theme={null}
{{-- 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
```blade theme={null}
{{-- Load all routes (respecting config filters) --}}
@routes
```
### Filter by Group
```blade theme={null}
{{-- Load only admin routes --}}
@routes('admin')
```
### Content Security Policy
```blade theme={null}
{{-- With nonce for CSP --}}
@routes(nonce: $nonce)
{{-- Or output as JSON only --}}
@routes(json: true)
```
### Conditional Loading
```blade theme={null}
@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`:
```php theme={null}
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:
1. Creates a new `Ziggy` instance with the specified group filter
2. Applies route filtering from your configuration
3. Outputs the appropriate format (script, JSON, or merge script)
4. Adds the nonce attribute if provided
5. 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.
## Related
Learn about the Ziggy class that powers the @routes directive
Configure route filtering and output options