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>

What does your build process look like?

Dai
– Dai

2020-01-02 01:19:14 +00:00
Commented Jan 2, 2020 at 1:19 — Dai
– Dai, Commented Jan 2, 2020 at 1:19
Do you mean npm run build?

Lucas Tonon
– Lucas Tonon

2020-01-02 01:56:01 +00:00
Commented Jan 2, 2020 at 1:56 — Lucas Tonon
– Lucas Tonon, Commented Jan 2, 2020 at 1:56
Good example here: stackoverflow.com/a/56639128/2162226

Gene Bo
– Gene Bo

2020-12-30 18:50:37 +00:00
Commented Dec 30, 2020 at 18:50 — Gene Bo
– Gene Bo, Commented Dec 30, 2020 at 18:50

Dhara Parmar · Accepted Answer · 2020-01-02 05:21:46Z

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

answered Jan 2, 2020 at 5:21

Dhara Parmar

2931 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use locally js files in vue components?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related