spatie / laravel-blade-javascript by spatie

A Blade directive to export variables to JavaScript
660,574
618
19
Package Data
Maintainer Username: spatie
Maintainer Contact: freek@spatie.be (Freek Van der Herten)
Package Create Date: 2016-05-28
Package Last Update: 2024-11-06
Home Page: https://freek.dev/486-a-blade-directive-to-export-php-variables-to-javascript
Language: PHP
License: MIT
Last Refreshed: 2024-12-22 03:02:23
Package Statistics
Total Downloads: 660,574
Monthly Downloads: 8,876
Daily Downloads: 20
Total Stars: 618
Total Watchers: 19
Total Forks: 41
Total Open Issues: 0

A Blade directive to export variables to JavaScript

Latest Version on Packagist Software License Build Status Quality Score StyleCI Total Downloads

This package contains a Blade directive to export values to JavaScript.

Here's an example of how it can be used:

@javascript('key', 'value')

The rendered view will output:

<script>window['key'] = 'value';</script>

So in your browser you now have access to a key variable:

console.log(key); //outputs "value"

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Installation

You can install the package via composer:

composer require spatie/laravel-blade-javascript

The package will automatically register itself.

Optionally the config file can be published with

php artisan vendor:publish --provider="Spatie\BladeJavaScript\BladeJavaScriptServiceProvider" --tag="config"

This is the contents of the published config file:

return [

    /**
     * All passed values will be present in this JavaScript namespace. Set this to an empty string
     * to use the window object.
     */
    'namespace' => '',
];

If you want to customize the generated <script> tag you can publish and override the used view.

php artisan vendor:publish --provider="Spatie\BladeJavaScript\BladeJavaScriptServiceProvider" --tag="views"

After this you can edit the published view resources/views/vendor/bladeJavaScript/index.blade.php. This is usefull to add the type or a CSP nonce.

Usage

With the package installed you can make use of a @javascript Blade directive.

@javascript('key', 'value')

The rendered view will output:

<script>key = 'value';</script>

You can also use a single argument:

@javascript(['key' => 'value'])

This will also output:

<script>key = 'value';</script>

When setting the namespace to eg js in the config file this will be the output:

<script>window['js'] = window['js'] || {};js['key'] = 'value';</script>

Changelog

Please see CHANGELOG for more information what has changed recently.

Testing

$ composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email freek@spatie.be instead of using the issue tracker.

Postcardware

You're free to use this package, but if it makes it to your production environment we highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

We publish all received postcards on our company website.

Credits

This repository contains some code from the laracasts/PHP-Vars-To-Js-Transformer package written by Jeffrey Way.

Support us

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

Does your business depend on our contributions? Reach out and support us on Patreon. All pledges will be dedicated to allocating workforce on maintenance and new awesome stuff.

License

The MIT License (MIT). Please see License File for more information.