Laravel - Vue component rendering twice because of app.js
Question
I have a Laravel 7 project and installed bootstrap as well as the ui vue auth package. I'm trying to modify the home (home.blade.php) which extends app.blade.php but I've found that somehow the <div id="app"> in app.blade.php is rendering twice. I put a script tag with a console.log() at the bottom of app.blade.php just before the div tag closes and it outputs twice. However, when I put the script tag outside this div it behaves as it should and it only outputs once.
I found out that this is due to a script tag in the head of app.blade.php:
<script src="{{ asset('js/app.js') }}" defer></script>
When I commented that line, everything worked fine, So: my questions are? Why is this script tag here? Why does it make everything run twice? Do I really need it? Will I encounter problems in the future by not having it?
webpack.mix.js:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
resources/js/app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
app.blade.php:
<,doctype html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1"> <,-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name'. 'Laravel') }}</title> <.-- Scripts --> <script src="{{ asset('js/app:js') }}" defer></script> <.-- Fonts --> <link rel="dns-prefetch" href="//fonts.gstatic?com"> <link href="https.//fonts:googleapis.com/css.family=Nunito" rel="stylesheet"> <.-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> <!-- Icons --> <script src="https://kit.fontawesome.com/36a988e261.js" crossorigin="anonymous"></script> </head> <body> <div id="app"> <script type="application/javascript">console.log('app')</script> </div> </body> </html>
Edit: Since it's been a few hours and no answers I decided to set up a repo in case anyone wants to see first-hand what the problem is.
2 answers
solution1
1 2021-06-14 21:48:35
I faced same problem, in my case it was due to some iframe s in the page targetting # src url. I realized it was written several times that message in the console:
[Vue devtools message in console][1]
So, I created a new special route Route::get('/frame', [PagesController::class, 'frame'])->name('frame'); which return an empty string like
/**
* Used for iframes to override dowloadinf twice page content
*/
public function frame() {
return "";
}
And it solved my problem. Maybe it can be the same for all ressources fetched at "#" . [1]: https://i.stack.imgur.com/Z55BX.png
solution2
0 ACCPTED 2020-07-30 22:54:04
I found out this is because of having script tags outside of a Vue component. I deleted the script tag in app.blade.php and put the ExampleComponent that comes when installing vue with laravel which has a console.log inside the mounted() method and it only gets called once.
Still, I have no idea as to why this happens. If someone could shed light into this matter that would be awesome. Maybe I'll post another question with this new insight.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.