Default javascript overschrijven in Laravel en Blade

Post hoe meerdere Javascript bestanden te gebruiken in je Laravel app. Ik gebruik Vue.js in Laravel en heb (de standaard) een app.js als algemene Javascript file in gebruik op elke webpagina.

<script src="{{ asset('js/app.js') }}" defer></script>

Nu wil ik bijvoorbeeld op de homepage een Vue component laten zien en niet op de andere pagina's. Zou hem dan kunnen registreren in de app.js maar dan zit hij ook op alle andere pagina's van de website.

Nieuwe javascript file voor de homepage

Een andere oplossing is een Javascript bestand maken voor alleen de homepage en daar mijn Vue component registreren

window.Vue = require('vue');

Vue.component('homepage-component', require('./components/HomepageComponent.vue').default);


const homepage = new Vue({
    el: '#app'
});

Maar als je deze ook include in de pagina waar ook js/app.js staat zal je een conflict krijgen omdat

<homepage-component></homepage-component>

niet is geregisteerd is in app.js. We moeten er dus voor zorgen dat alleen homepage.js te zien is.

Als 'js_top' niet bestaat laat dan de default app.js zien

In mijn app.blade heb ik het volgende tussen mijn head staan

 @hasSection('js_top')
        @yield('js_top')
    @else
        <script src="{{ asset('js/app.js') }}" defer></script>
    @endif

Als er geen sectie is meegegeven voor js_top laat hij app.js zien.

In mijn homepage blade staat het volgende op js_top mee te geven zodat homepage.js is geladen i.p.v. app.js

@section('js_top')
    <script src="{{ asset('js/homepage.js') }}" defer></script>
@endsection