If you paste a script into the blade Laravel template, you will see errors in the browser JavaScript console. By design, Laravel assumes that you will use scripts only in app.js and bootstrap.js files. Blade template files should contain only HTML code and rendering instructions.
But in some cases, you need to use JavaScript directly in the blade files. In this short article we will explain how to do it safely and avoid errors.
Table of Contents
Using Scripts in Blade Files in Laravel
You may notice that errors occur only if you include the app.js file generated by the Laravel mix. For example, you can modify the default home.blade.php and add a simple script to it:
<script>console.log('test');</script>
When you open this page in the browser and open the JavaScript console, you will see that your script works but Vue throws an error building the template.
Let’s find out why it happens. If you look at the content of the file resources/js/app.js you will see initialization of Vue application and it uses an element with ID #app.
Now, let’s look at the content of the file resource/views/layouts/app.blade.php. Here you can find the element with ID #app:
This means that, if you use this layout, all your code will be inside the Vue application. But the application doesn’t allow the use of script tags and any scripts in its template code. You can use only Vue instructions. If you already have Vue, you can do anything you need in it, without any external scripts. We will show how to use Vue with Laravel in our next articles. But if you want to use scripts in blade files here are two ways to solve this issue. You can disable Vue, or you can paste your scripts outside the #app element.
1. Disable Vue Initialization
It’s a bad idea to remove the whole public/js/app.js file from the layout template. You can import jQuery and other JS libraries that you need there and use Laravel Mix to build it. As a result, your project will be independent of external CDNs and code storage. So, just remove Vue initialization code from the file resources/js/app.js:
const app = new Vue({
el: '#app',
});
After this, rebuild your JavaScript assets using the following command:
npm run dev
Now, your scripts will work, and you will not see errors in the browser JS console.
2. Paste the Scripts Outside of Vue App
If you want to use Vue and inline scripts together in one blade file you should place scripts outside the #app container. Create new section in the app.blade.php layout file after the #app container. You can place it before </body> closing tag. For example:
@yeild('js')
After this, you can use this section in your blade files for any scripts. For example, if you want to add a script in the home.blade.php use this code:
@section('js')
<script>console.log('test');</script>
@endsection
After this, the Vue scripts and your other scripts will work fine.
Wrapping Up
In this article we have explained how to use the script in blade files in Laravel. As you can see it is pretty simple. If you have any questions, use the comment form below.
