How to load external js file in vue js

In this blog, you will learn how to add external JS files in your Vue components. There are two methods available to achieve this: using the import method and using the script tag. Although Vue components typically use the script tag, you can still integrate external JS files effectively. Let's explore both methods in detail.

Method 1: Using the Import Method

The first method is to load an external JS file via the import method. This is a basic and commonly used approach.

import '/../../path-to-script-method';

This method allows you to access external JS functions easily and is widely used for its simplicity and effectiveness.

Method 2: Using the Script Tag

The second method involves using the script tag within the script setup section of your Vue component.

<script setup>
  let scriptTag = document.createElement("script");
  scriptTag.setAttribute("src", "https://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.min.js");
  document.head.appendChild(scriptTag);
</script>

By using this method, the external JS file will only execute in the specified Vue component. This ensures that the external file does not affect the performance of other components.

Both methods offer efficient ways to include external JS files in your Vue components, providing flexibility depending on your project's requirements.

Thank you for reading!

5 Comments

www.octeaujoaillier.com 2025-05-05 23:04:57

www.octeaujoaillier.com

www.octeaujoaillier.com 2025-05-05 23:05:19

www.octeaujoaillier.com

Réseau Fisconseils 2025-06-07 20:31:14

Réseau Fisconseils

Réseau Fisconseils 2025-06-07 20:31:38

Réseau Fisconseils

https://chaussuressemy.com/boutique/ 2025-06-10 00:27:47

https://chaussuressemy.com/boutique/