Vue including Javascript files twice in Laravel Spark Blade template

Question

I'm new to Laravel Spark and Vue, and have tried to move an existing app to it. In that app, I have these scripts included in the Blade template, which is then injected into app.blade.php:

<script type="application/javascript" src="{{ mix('js/sidebar.js') }}"></script>
<script type="application/javascript" src="{{ mix('js/addEditTask.js') }}"></script>
<script type="application/javascript" src="{{ mix('js/scheduler.js') }}"></script>

The problem is that functions from inside these files are getting called twice. How can I fix this?

Answer 1

I ended up adding a stack to the bottom of my app.blade.php, so it looks like this:

<!-- JavaScript -->
@stack('scripts-bottom')
<script src="{{ mix('js/app.js') }}"></script>

Then in my other blade file, I push them onto the stack:

@push('scripts-bottom')
<script type="application/javascript" src="{{ asset('js/sidebar.js') }}"></script>
<script type="application/javascript" src="{{ asset('js/addEditTask.js') }}"></script>
<script type="application/javascript" src="{{ asset('js/scheduler.js') }}"></script>
@endpush