[Vuejs]-Vue app.js colliding with other JavaScript files on homepage (Laravel)

regarding CSS collisions…

You can solve by making sure all your css is getting scoped.

instead of

<style>
/* global styles */
</style>

use

<style scoped>
/* local styles */
</style>

Vue will then compile your css to have generated is like h1[data-v-f3f3eg9] that will prevent other elements on the page from being formatted by your vue code. It will not, however, prevent your page code from affecting the vue components unless you add css resets to you components.

regarding JS code…

it’s hard to tell without seeing what the collisions are. AFAIK There’s no magical setting for that.

I found the solution for this collision

Put your app.js at the top of your script links like:

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

Then

<script> $.noConflict(); /script>

After that put your other JavaScript it will work fine.