Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spatie/laravel-blade-javascript
A Blade directive to export variables to JavaScript
https://github.com/spatie/laravel-blade-javascript
api blade javascript laravel php view
Last synced: 6 days ago
JSON representation
A Blade directive to export variables to JavaScript
- Host: GitHub
- URL: https://github.com/spatie/laravel-blade-javascript
- Owner: spatie
- License: mit
- Created: 2016-05-28T09:01:52.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-29T08:20:12.000Z (11 months ago)
- Last Synced: 2024-09-08T16:36:21.608Z (4 months ago)
- Topics: api, blade, javascript, laravel, php, view
- Language: PHP
- Homepage: https://freek.dev/486-a-blade-directive-to-export-php-variables-to-javascript
- Size: 109 KB
- Stars: 618
- Watchers: 19
- Forks: 41
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
- awesome-laravel-framework - Laravel Blade Javascript - A Blade directive to export variables to JavaScript (Popular Packages)
- awesome-laravel - Laravel Blade Javascript - Una directiva Blade para exportar variables a JavaScript (Paquetes utiles)
- laravel-awesome - Laravel Blade Javascript - A Blade directive to export variables to JavaScript (Popular Packages)
- awesome-laravel - Laravel Blade Javascript - A Blade directive to export variables to JavaScript (Popular Packages)
README
# A Blade directive to export variables to JavaScript
[](https://packagist.org/packages/spatie/laravel-blade-javascript)
[](LICENSE.md)
[](https://github.com/spatie/laravel-blade-javascript/actions/workflows/run-tests.yml)
[](https://packagist.org/packages/spatie/laravel-blade-javascript)
This package contains a Blade directive to export values to JavaScript.
Here's an example of how it can be used:
```php
@javascript('key', 'value')
```
The rendered view will output:
```html
window['key'] = 'value';
```
So in your browser you now have access to a key variable:
```js
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](https://spatie.be/opensource).
## Support us
[
](https://spatie.be/github-ad-click/laravel-blade-javascript)
We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
## Installation
You can install the package via composer:
``` bash
composer require spatie/laravel-blade-javascript
```
The package will automatically register itself.
Optionally the config file can be published with
```bash
php artisan vendor:publish --provider="Spatie\BladeJavaScript\BladeJavaScriptServiceProvider" --tag="config"
```
This is the contents of the published config file:
```php
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 `` tag you can publish and override the used view.
```bash
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.
```php
@javascript('key', 'value')
```
The rendered view will output:
```html
<script>key = 'value';
```
You can also use a single argument:
```php
@javascript(['key' => 'value'])
```
This will also output:
```html
key = 'value';
```
When setting the namespace to eg `js` in the config file this will be the output:
```html
window['js'] = window['js'] || {};js['key'] = 'value';
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Testing
``` bash
composer test
```
## Contributing
Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.
## Security
If you've found a bug regarding security please mail [[email protected]](mailto:[email protected]) instead of using the issue tracker.
## Credits
- [Freek Van der Herten](https://github.com/freekmurze)
- [Sebastian De Deyne](https://github.com/seb)
- [All Contributors](../../contributors)
This repository contains some code from the [laracasts/PHP-Vars-To-Js-Transformer](https://github.com/laracasts/PHP-Vars-To-Js-Transformer) package written by [Jeffrey Way](https://github.com/JeffreyWay).
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.