How to add external js file in Nuxt?

In Nuxt.js, there are multiple approaches to add external JavaScript files, depending on your specific requirements and the context in which the external scripts are used. Here are several common methods:

1. Using nuxt.config.js File

For external scripts that need to be used globally, you can include them by modifying the head property in the nuxt.config.js file. This ensures the scripts are available across all pages of your application. For example, to add an external jQuery library, you can do the following:

javascript
export default {
  head: {
    script: [
      { src: 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' }
    ],
    // Other head configurations...
  },
  // Other Nuxt configurations...
}

2. Dynamically Loading in Page Components

If you only need to load external JavaScript files on specific pages or components, you can dynamically add them within the component's lifecycle hooks. Using the mounted hook ensures the DOM is fully loaded before execution, for example:

javascript
export default {
  mounted() {
    const script = document.createElement('script');
    script.src = "https://cdn.jsdelivr.net/npm/your-script.js";
    script.async = true;
    document.head.appendChild(script);
  }
}

3. Using Plugins

In Nuxt.js, you can introduce external JavaScript files by creating plugins, which is particularly useful for scripts that must be loaded before Vue is instantiated. For instance, you can create a plugin to load and initialize an external SDK:

javascript
// plugins/your-plugin.js
export default ({ app }, inject) => {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/your-sdk.js';
  script.onload = () => {
    // Initialize SDK
    const sdk = new YourSDK();
    inject('sdk', sdk);
  }
  document.head.appendChild(script);
}

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/your-plugin.js', mode: 'client' }
  ],
  // Other Nuxt configurations...
}

Usage Scenario Example

Imagine developing an e-commerce website that requires using an external 360-degree image viewer library on specific product display pages. To optimize load time and performance, you might choose to dynamically load this library within the page's component rather than globally. This ensures the library is only loaded and initialized when the user accesses the page.

Each method has its advantages, and the choice depends on your specific requirements and project structure. In practice, understanding and selecting the method most suitable for your project context is crucial.