Laravel Blade Javascript

spatie/laravel-blade-javascript image

Laravel Blade Javascript stats

Downloads
547.5K
Stars
580
Open Issues
0
Forks
73

View on GitHub →

A Blade directive to export variables to JavaScript

A Blade directive to export variables to JavaScript

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.

Support us

We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.

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. We publish all received postcards on our virtual postcard wall.

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've found a bug regarding security please mail security@spatie.be instead of using the issue tracker.

Credits

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

License

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

spatie photo

We create open source, digital products and courses for the developer community

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.


Spatie Laravel Blade Javascript Related Articles

Generate PDFs in Laravel from Blade Views image

Generate PDFs in Laravel from Blade Views

Read article
80 Laravel Tutorials, Packages, and Resources from 2016 image

80 Laravel Tutorials, Packages, and Resources from 2016

Read article
Shift logo

Shift

Running an old Laravel version? Instant, automated Laravel upgrades and code modernization to keep your applications fresh.

Shift
Honeybadger logo

Honeybadger

Simple developer-focused application monitoring for Laravel. Error tracking, log management, uptime monitoring, status pages, and more!

Honeybadger
Typesense Search logo

Typesense Search

Typesense is an open source, blazing-fast search engine, optimized for helping you build delightful search experiences for your sites and apps. Natively integrated with Laravel Scout.

Typesense Search
Tinkerwell logo

Tinkerwell

The must-have code runner for Laravel developers. Tinker with AI, autocompletion and instant feedback on local and production environments.

Tinkerwell
Curotec logo

Curotec

World class Laravel experts with GenAI dev skills. LATAM-based, embedded engineers that ship fast, communicate clearly, and elevate your product. No bloat, no BS.

Curotec
The Certification of Competence for Laravel logo

The Certification of Competence for Laravel

A community-driven, proctored assessment across 4 levels designed to validate real-world Laravel knowledge, from Junior to mastery-level Artisan. Official Vue.js, Official Nuxt, Angular, React, JS certifications also available.

The Certification of Competence for Laravel