How to add external JS scripts to VueJS Components?

javascript

async-components

vuejs

script-loading

byAnton Shumikhin·Nov 20, 2024

If you're eyeing for a quick way to incorporate an external JS script into your VueJS component, you can utilize the mounted lifecycle hook to dynamically generate a script element. Here's a snippet that does the job:

export default {
  mounted() {
    const script = document.createElement('script');
    script.src = 'https://your-external-script.js';
    document.head.appendChild(script); // Bam!! Your script is in action!!
  }
}

This snippet cleverly inserts your external script right after the Vue component takes the floor, making sure it's readily available within the component.

Leveraging Lifecycle Hooks and Tips for Optimization

When embedding external JS scripts in your VueJS components, high performance and efficiency should be your priorities. Ensuring scripts live in the public directory can prevent duplications caused by webpack, and also make them available only when necessary.

Strategic Loading and Increasing Performance

To load scripts depending on conditions, you can summon reactive Vue properties within the mounted() hook to decide whether a script is invited to the party. You can also use async or defer attributes for the script to ensure it doesn't cut the line, keeping document parsing in process.

Dynamic Import(ance)

For a bolder move, consider using the import() function to load a component after a script has finished loading. It comes quite handy if a component is dependent on a library or a piece of code delivered by the external script.

Promises for Reliability

Embrace promises to manage script loading and increase reliability. A success callback makes sure your script takes the stage only when fully loaded, while error handling can take care of the situations where loading didn't go as expected.

Vue-Plugin-Load-Script for Ease

For ease of script-loading, there is a knight in shining armor, the vue-plugin-load-script NPM package. It provides a convenient Vue.loadScript method, that can make handling script-loading a walk in the park.

Advanced Loading Strategies for Your Arsenal

To bling up the script-loading mechanism can be a game-changer for user experience and performance. Here are a few extra shots for your VueJS artillery.

Strategic Loading with Router-View

Loading scripts on the fly with Vue's router-view helps bring script loads to only the right route components. It's like addressing the guests at a party by their names, a clever way of optimizing resource utilization.

Handling Multiple Scripts

When dealing with a party of scripts, use forEach to produce and load each script dynamically. No need to reinvent the wheel, keep your code DRY and manageable.

MIME Type to the Rescue

To avoid potential compatibility issues, set the script element's type attribute to 'application/javascript'. Clear indication, fewer problems!

The Awesome Async Components

To reduce the initial loading times, trigger component loading after your script loads with Vue.component('async-webpack-example', () => import('./my-async-component')). This puts your components in async mode, ensuring they only rise and shine when required.

explain-codes / Javascript / How to add external JS scripts to VueJS Components?

Linked

Adding script tag to React/JSX



Dynamically load JS inside JS



Managing jQuery plugin dependency in webpack



How do I include a JavaScript file in another JavaScript file?



How to watch store values from vuex?

