Im trying to build single page app using Vue + inertia + laravel. I have an html template that include external js file. When integrating the template with vue, i notice that, the js only run only once after the page is refresh and not applied to the other page (when navigate using router-link)
i tried some method:
A. add the js script within vue template using mounted
mounted() {
let appscript = document.createElement("script");
appscript.setAttribute(
"src",
"/dist/js/app.js"
);
document.head.appendChild(appscript);
}
B. Add the js script using meta info
metaInfo: {
script: [
{
src: "/dist/js/app.js",
async: true,
defer: true,
},
],
},
here is my blade file
<!DOCTYPE html>
<html lang="en" class="light">
<head>
<meta charset="utf-8">
<link href="/dist/images/logo.svg" rel="shortcut icon">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
CollaborApps
</title>
<link rel="stylesheet" href="{{ asset('dist/css/app.css') }}" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script type="application/javascript" src="{{ asset('/js/app.js') }}" defer></script>
<script type="application/javascript" src="{{ asset('/dist/js/app.js') }}" defer></script> <- this is the external js
@routes
</head>
<body class="main">
@inertia
</body>
</html>
How to integrate javascript file with vue SPA?