Laravel Blade Javascript Laravel Package
spatie/laravel-blade-javascript
Adds a simple @javascript Blade directive to export PHP values to JavaScript by writing them to window in a script tag. Use @javascript('key','value') and access it in the browser as key/value for quick server-to-client data sharing.
Getting Started
Install via Composer: composer require spatie/laravel-blade-javascript. No manual service provider registration needed—the package auto-registers. Begin by exporting a simple variable in a Blade template: @javascript('appUrl', url('/')). When the page renders, this outputs <script>window['appUrl'] = 'https://your-app.com';</script>, making appUrl globally accessible in client-side JS. Check the config at config/blade-javascript.php (publish with php artisan vendor:publish --provider="Spatie\BladeJavaScript\BladeJavaScriptServiceProvider" --tag="config") to set a JS namespace (e.g., 'namespace' => 'app' scopes variables under window.app.key).
Implementation Patterns
Use @javascript in any Blade file—typically inside a layout (e.g., resources/views/layouts/app.blade.php) near the top of the <head> or just before </body>. Pass a single associative array to export multiple vars at once: @javascript(['csrfToken' => csrf_token(), 'currentUser' => auth()->user()->only(['id', 'name'])]). For security-sensitive data (e.g., user details), always filter data with only() or transform() to avoid leaking unnecessary fields. Leverage the namespace config to prevent global pollution and name collisions across modules. If using CSP, publish and edit the default view (resources/views/vendor/bladeJavaScript/index.blade.php) to inject a nonce: <script nonce="{{ csp_nonce() }}">...</script>.
Gotchas and Tips
- XSS risk: The package automatically escapes strings (since v2.5.2), but be cautious with complex objects—ensure nested data doesn’t contain unescaped HTML. Avoid passing raw HTML from user input directly.
- Order matters: Place
@javascriptbefore any inline scripts that depend on these variables; otherwise, the variables won’t be defined yet. - Debugging: Use browser dev tools to inspect the injected
<script>blocks. If variables are missing, verify the directive is included outside of@push/@stackblocks, as rendering order may be altered. - Data types: The package preserves primitives (strings, numbers, booleans), but objects and arrays are JSON-encoded as strings (e.g.,
'["a","b"]'). Always wrap non-primitives injson_encode()or use@javascript(['user' => (object)$user])to ensure proper parsing. - Laravel 11+: The package actively supports up to Laravel 13—ensure you’re using a recent version (≥2.8.0).
- Customization: Override the view to add
defer,async, or type attributes (e.g.,type="module"for modern bundlers), though this may require adjusting how JS consumes the globals.
How can I help you explore Laravel packages today?