I made a SPA with laravel + vuejs3 (inertia).
My SPA works without worries, but I made a module that is on several sites (WP) which is a js file that loads on a tag with the id="form".
It works well on the several sites but here since I use a SPA I have the impression that it does not work.
As soon as I navigate elsewhere with a <Link> from inertia (so in SPA without refreshing the browser) and I come back to the form it does not work. So it only works the first time, do you have any idea what to do? Because currently I am going through a complete PHP page but I do not like it if I would like to find a solution!
so in my controller I simply have:
return Inertia::render('Form');
and at this point in my view I simply do:
<div id="form"></div>
and in my app.blade.php
<script type="module" crossorigin src="{{ asset('/js/index-8AJeVKiN.js') }}"></script>
when I do that the module does not load, so I did this in the .vue file:
mounted(){
this.loadScript('/js/index-8AJeVKiN.js', () => {
});
},
watch:{
},
methods:{
loadScript(src, callback) {
if (!document.querySelector(`script[src="${src}"]`)) {
const script = document.createElement('script');
script.src = src;
script.type = 'module'; // Ajoute type="module" si nécessaire
script.onload = callback; // Appeler la fonction callback une fois chargé
document.head.appendChild(script);
} else {
callback(); // Appeler la fonction directement si déjà chargé
}
},
},
