I'm currently in the process of transitioning my projects website to Vue.js with Nuxt.js integrated. I have been transferring all the files from the remote server to the local "static" folder.
Everything seems to be functioning properly, except for the JavaScript that runs when the page is initially loaded. Once I switch to a different page using the routes or refresh the current page, the JavaScript ceases to work.
For example, one of the pages on my projects website is:
This page allows users to drag an image onto other boxes, triggering class changes upon hover over any box with the image.
I moved the CSS to the local static folder successfully but encountered issues with the JavaScript. It only functions once and stops working after a route change or page refresh...
The script behaves as expected upon the initial load of the page; however, it fails to execute after a reload/change of route, resulting in no class transformations upon hovering over the boxes, etc... Despite working flawlessly the first time the page loads.
Upon researching this issue yesterday, I found responses to similar queries stating that the script is executed only once when the page is initially loaded. Hence, when there are route modifications or the page is refreshed, the script does not run again.
Some suggestions included adding the function intended for page load execution to the "created()" method within "export default" in the vue component.
In my scenario, I do not aim to execute something every time the page loads, but rather specific portions of the script triggered only by user interactions on the page...
Loading the script each time is unnecessary as the interactions may not occur, rendering the script redundant and increasing load times. Furthermore, incorporating the entire script into the "created" method would clutter the component.
Unfortunately, I did not find a concrete solution to this issue, only temporary fixes that produce unintended effects...
Here is the structure of my components (the following component is from ):
<template>
<div class="container">
<div class="box">
<div class="fill" draggable="true"></div>
</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</template>
<script>
export default {
name: 'Drag',
head: {
link: [ { rel: 'stylesheet', type: 'text/css', href: 'css/drag.css'} ],
script: [ { src: 'js/drag.js' } ]
}
}
</script>
<style>
</style>
Do you have any suggestions to resolve this issue? Or any workarounds specific to my situation?
PS - Every time I close the tab and open a new one, the scripts work fine until the page is reloaded or the route is changed.