Sometimes, you may need to pass certain PHP variables to JavaScript code in a Blade template or even to a separate JavaScript file that is imported into the template.
In this short article, I will show you how to pass PHP variable to JavaScript in Laravel and avoid errors in the JavaScript console.
How to pass a variable in JavaScript in Blade
For all the examples in this article, I will use the file info.blade.php, which is filled with data from the controller using the following PHP code:
app/Http/Controllers/InfoController.phpreturn view("info")
->with("url", "https://haait.net")
->with("timeout", 60)
->with("colors", ["green", "blue", "yellow", "red"]);
If your JavaScript code is located directly in the Blade file, then you can declare a javascript variable in the script itself and print the PHP variable value in it without escaping special characters. This will work because the template is compiled before displaying, and the value of the variable will be written directly into the JS code on the client side.
For example, for a string variable, the code will look like this:
resources/views/info.blade.php<script>
var url = "{!! $url !!}";
console.log(url);
</script>
Please note that values should be wrapped in double quotes. Even if it is a number, you should put it in quotes and explicitly convert it to a number. Because if the variable is accidentally empty, the entire script will not work.
If such a variable contains php object or array that should be converted to JSON, you can use the special blade directive that is called @json:
resources/views/info.blade.php<script>
var colors = @json($colors);
console.log(colors);
</script>
In this case you will see js array in the browser console:
As you can see, everything is simple here. However, sometimes it is necessary to pass parameters to an app.js script or another external javascript script that is included in the page. Usually, the script should manipulate elements on the page, and all the necessary settings can be stored in data-* attributes of those elements or passed through function calls and object creation. This can be done as described above.
However, in some cases, you may want to preset some variables for a script. It may be obvious to front-end developers, but all JavaScript scripts that run on a page are in the same space and have access to the same objects. Each page has a window javascript object, which is used to access the browser API. You can also store your variables in this object, which will be available to all scripts on the page.
I will describe an approach I’ve seen in several ad-serving platforms. You can specify the settings in your blade file and then import an external script. First, let’s get the example external script ready. Add the following code to app.js. This code will read the url variable from the app_settings object in the window object and output its value to the browser console. And also the timeout variable, if it exists:
resources/js/app.jswindow.app_settings = window.app_settings || [];
console.log(window.app_settings.endpoint_url);
if (window.app_settings.timeout !== undefined){
console.log(window.app_settings.timeout);
}
The instruction in the first line allows you to take an existing object or create an empty one if it does not already exist. This is to avoid errors in the JavaScript console if the settings are not set at all.
After that, you need to rebuild the scripts using npm:
npm run build
Now you can go to your blade file. You need to create your object with the settings, in this case app_settings, and then add the necessary settings to it, for example endpoint_url:
resources/views/info.blade.php<script>
window.app_settings = window.app_settings || [];
window.app_settings.endpoint_url = "{!! $url !!}"
</script>
@vite("resources/js/app.js")
After this, you can open the browser and ensure everything works. Your script can read the variable:
You can define the settings in multiple places on the page in any order. For example, you can add timeout a little later, and this code won’t overwrite the URL setting:
resources/views/info.blade.php<script>
window.app_settings = window.app_settings || [];
window.app_settings.endpoint_url = "{!! $url !!}"
</script>
<!-- SOME HTML CODE -->
<script>
window.app_settings = window.app_settings || [];
window.app_settings.timeout = "{!! $timeout !!}"
</script>
@vite("resources/js/app.js")
It is only important that the external script code is included after the configuration code is defined:
As you can see, everything works.
Wrapping Up
In this short article, I have shown how to pass parameters to a script from Blade in Laravel, even if the script is not inline. Probably, there are more efficient ways to do this exist, and if you know them, please share in the comments section.
