How to use locally js files in vue components?

Question

I have an animation js file, that I'm trying to use on a specific vue component. I tried to use import, required and mounted(), but none of that worked so far

 <template>
 <div class="home">
<audio controls="controls" src="../assets/raindrops-in-the-ocean.mp3"></audio>
<canvas id="canvas"></canvas>
 </div>
</template>
   <script>
    require('../assets/raindrops.js');

     export default {
     name: 'raindrops-in-the-ocean',
     components: {
     },
created() {
let recaptchaScript = document.createElement('script')
recaptchaScript.setAttribute('src', '../assets/raindrops.js')
document.head.appendChild(recaptchaScript)
},
}
</script>

Answer 1

By using below import statement you can use locally javascript file:

 <script> import '../assets/raindrops.js'; export default { name: 'raindrops-in-the-ocean', components: {}, created() { let recaptchaScript = document.createElement('script') recaptchaScript.setAttribute('src', '../assets/raindrops.js') document.head.appendChild(recaptchaScript) }, } </script>

Note: It is recommended to use relative path instead of absolute path for importing any file