Great, I will try to explain my approach of doing such kind of replacement work.
Laravel comes with assets directory containing js and css directory. If you explore more the js directory you'd see two files bootstrap.js and app.js.
bootstrap.js file is nothing but few handy stuffs like setting jQuery as global object so that it can be accessed in vue instance easily, setting axios default header to have X-CSRF-TOKEN while using axios in the project.
But the important part is app.js. It initialises the vue instance and binds it with a #app div which mostly the first div after <body> tag.
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In the above file, you can see there vue instance is created and it is bound to a div whose id is app. Along with that Vue is also registering a component called example which is stored under js/components/ directory as Example.vue.
Now, based on your requirement you can go ahead and follow these steps to create components to replace some of jQuery codes without having any conflicts.
• Make sure to bind the the vue instance to root div so that you can use the component in the blade file this way.
<div id="something">
<example></example>
</div>
• If you Laravel mix, make sure you compile the app.js
mix.js('resources/assets/js/app.js', 'public/js')
I have worked on projects have similar required modifications, I followed the way I just mentioned and worked quite well for me.
Feel free to ask any question you have. Cheers!
