Vue app.js colliding with other JavaScript files on homepage (Laravel)

Question

I included Vuejs in my existing project but now it is affecting my original theme JavaScript files. Without app.js on my homepage, everything works fine. But when I include it, All UI effects and functionalities on my original theme js file including sliders, canvas, carousels, and dropdowns all stops working.

How do I stop Vue from colliding with my theme js and causing it to break

Answer 1

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.

Answer 2

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.