I'm using a bootstrap-jQuery theme with lots of jQuery based libraries in a Laravel-Inertia app. the html version of the theme is working fine. but when I use it inside my inertia app lots of issues pops up. sometimes it gives .somefunction is not a function and some functionalities don't work properly. sometimes it gives jQuery is not defined even though I put the scripts in the correct order above my app.js which contain the inertia core login and make both app.js and themescripts.js defer.
will this even work? can Vue & jQuery work together properly??
is there any difference between these two approches?
// here I'm trying to compile theme scripts inside app.js before inertia
require('../assets/bundles/x.bundle.js');
require('../assets/plugins/sweetalert/sweetalert.min.js');
AND
// here I'm putting scripts in the blade file along with my main app.js
<script defer src="/assets/bundles/x.bundle.js" defer></script>
<script defer src="/assets/plugins/sweetalert/sweetalert.min.js" defer></script>
VueJS and jQuery take two fundamentally different approaches to interacting with the DOM and are often likely to conflict, particularly if jQuery attempts to subvert the shadow-dom-like elements that are held by Vue. I recommend that you choose one or the other and avoid mixing them whenever possible.
The difference between your two inclusion examples are that the first one will be built and generated into a single javascript file (that you will have to later include into your page using a <script> tag) while the second will be downloaded and executed separately by the browser.
