If you place JavsScript code directly into the content section of the Blade template in Laravel with Vue 2, you will most likely see an error in the JavaScript console. The thing is that all JavaScript code should be in app.js and bootstrap.js. And blade files should contain only HTML code and rendering instructions.
Sometimes, you may need to add code to the blade file. In this short article, I will show you how to do it properly and avoid errors in the console.
Table of Contents
Using Scripts in Blade Files in Laravel
You might notice that the errors will appear only when the app.js file is included in a template. I got this issue in projects with authentication scaffolding generated by the laravel/ui package on Laravel 9 or lower. The versions of Laravel use Vue 2, Laravel Mix, and Webpack. In this article, I will show how to fix an error that occurs in projects with blade templates generated by the following commands:
php artisan ui vue --auth
npm install && npm run dev
Breeze or Jetstream starter kits work differently; you may not see these JavaScript errors there. But the main principle, to insert JavaScript code only in app.js or at the bottom of the page, is the same.
Let’s look at how to fix the issue with JavaScript errors in the console for Vue 2 and Laravel Mix. For example, Let’s add the following JavaScript code to the login.blade.php template, which is used for the login page:
resources/views/auth/login.blade.php<script>console.log('Hello!');</script>
If you open the login page in the browser and look into the JavaScript console, you will see that your code works correctly. Nevertheless, there is a large error message from Vue with the following text: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
Let’s find out why it happens. You can open the resources/js/app.js file and see that the Vue instance is initialized using an element with id #app as the root container.
Then, let’s look at the main template of the application – resources/views/layouts/app.blade.php. Here you can see that element with the id of app:
This means all code inside this element is considered a Vue template. However, Vue doesn’t allow script tags or other external scripts in its templates. Since this template is used to build any page in your project, including the login page, all contents of your blade views are considered as Vue template, too.
Using Vue in your project, you can do everything you need using its capabilities and components. However, if you need to add an external script, you have two different ways: disable Vue or include your script outside of the #app element.
Pay attention that in Vue 3 mounting system has changed. You are still not allowed to use script or style tags in Vue templates, but the root element with #app by default is not considered a Vue template. It is only used to mount Vue there. Therefore, there are no issues with placing JavaScript code. You can find more details in the official documentation.
1. Disable Vue Initialization
The first solution that may seem like a good one is to remove the app.js file import from the template file. But you would better don’t because you can still use it to import JQuery or other necessary JS libraries and build them all into one file with Laravel Mix. Besides, delivering all your scripts as one file and keeping them within the project makes your application faster and independent from external CDN services. However, you can just delete the initialization of Vue from the app.js file:
resources/js/app.jsconst app = new Vue({
el: '#app',
});
Then rebuild your assets:
npm run dev
After this, your scripts will work without Vue errors or warnings in the JavaScript console.
2. Paste the Scripts Outside of Vue App
If you need to use Vue and an additional script on the same page, that script must be outside the Vue root element. And even in Vue 3, where adding scripts to an element that Vue is mounted to doesn’t cause errors, it would better follow the standard approach of placing all scripts as close as possible to the end of the page. Using the yield blade directive, you can add another section before the </body> closing tag. For example, let’s name it js. Add the following line into the app.blade.php layout:
resources/views/layouts/app.blade.php@yield('js')
After this, you can use this section in any blade file that extends this layout. For example, use the following code to add our example script in the login.php:
resources/views/auth/login.blade.php@section('js')
<script>console.log('test');</script>
@endsection
Then you can open the browser and ensure your script works without errors.
Wrapping Up
In this article, I’ve shown you how to use scripts in Blade Laravel. This instruction is more relevant for previous versions of Laravel that used Vue 2. But the approach of using sections can be useful in newer versions as well.
