Every two weeks I send out a newsletter containing lots of interesting stuff for the modern PHP developer. You can expect quick tips, links to interesting tutorials, opinions and packages. Want to learn the cool stuff? Then sign up now!

A Blade directive to export PHP variables to JavaScript

Today we released our new package called laravel-blade-javascript. It provides you with a javascript Blade directive to export PHP variables to JavaScript. So it basically does the same as Jeffrey Way‘s popular PHP-Vars-To-Js-Transformer package but instead of exporting variables in the controller our package does it a view.

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

@javascript('key', 'value')

The rendered view will output:

<script type="text/javascript">window['key'] = 'value';</script>

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

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

You can also use a single argument:

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

Which will output the same as the first example.

You can also use the config file to set up a namespace where all exported JavaScript variables should reside in.

Want to learn more? Then take a look at the package on GitHub. You can find a list of packages we previously released on our site.

Freek Van der Herten is a partner and developer at Spatie, an Antwerp based company that specializes in creating web apps with Laravel. After hours he writes about modern PHP and Laravel on this blog. When not coding he’s probably rehearsing with his kraut rock band. He loves waffles and butterflies.
  • Pingback: Export php variables to javascript - Joren Van Hocht()

  • Lasse Rafn


    There’s an error in the second code block.

    @javascript([‘key’ => ‘value])

    Should be:

    @javascript([‘key’ => ‘value’])

  • carlo villamayor

    this is awesome, thank you. 🙂

  • legshooter

    Any advantages over just outputting:

    namespace = {
    csrf: “{{ csrf_token() }}”,
    etc: “{{ $etc }}”


    • To my eyes a snippet like

      @javascript([‘csrf’ => csrf_token(), ‘etc’ => $etc])

      looks much cleaner.

  • Ruffles

    I’ve never really understood the purpose of these types of packages.

    Isn’t it better if you just pass the value over to the JavaScript side using a HTML5 data attribute on an element or even hitting the server with an AJAX request in some cases?

    This package seems useful only for small projects where they don’t really use a lot of JavaScript on the front end. What about a better organized JavaScript files in a project?

    I am just curious, I don’t have anything against the package or anyone.

    • Ssure, if there is a lot of data that must be passed to the js-layer this package is probably not the best solution.

      It’s intended to use in small to medium projects were only a few variables need to be passed.

  • Pingback: Community News: Recent posts from PHP Quickfix (06.08.2016) – SourceCode()

  • Pingback: 83 Top Laravel Articles in 2016: What You Clicked in Newsletters - Laravel Daily()