DEV Community

Igor Irianto
Igor Irianto

Posted on • Updated on • Originally published at irian.to

How to load external script in Nuxt app

Recently I had to load a 3rd party code snippet to my Nuxt app. The code snippet looks something like this:

<link rel="stylesheet" href="https://some-website.com/stuff.css">

<div class="some-class">
  <div>Some content...</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://some-other-website.com/stuff.js"></script>
Enter fullscreen mode Exit fullscreen mode

I need to load a stylesheet and several scripts. I will share how I accomplished this using Nuxt and different ways you can do this.

Using vue-meta

You can use vue-meta's head() method to insert your script. Luckily, vue-meta comes preinstalled with Nuxt.

This will insert both script and style into your the head of the page.

// nuxt.config.js OR pages/some/page.vue

export default {
  head() {
    return {
      script: [
        {
          src: "https://some-website.com/stuff.js"
        }
      ],
      link: [
        {
          rel: "stylesheet",
          href:
            "https://some-site.com/stuff.css"
        }
      ]
    }
Enter fullscreen mode Exit fullscreen mode

You can do this on either nuxt.config.js or directly to Nuxt page(s) (If you do this inside nuxt.config.js, the changes will apply to all pages).

The code above will add the script to head element.

Vue-meta: loading script into body

If you prefer to add the script into body, just add body: true and you're set! 👍

script: [
  {
    src: "https://some-website.com/stuff.js",
    body: true
  }
]
Enter fullscreen mode Exit fullscreen mode

Vue-meta: defer + async

Vue-meta allows you to add your script with defer and/ or async on. If you want to load it with async and defer, you can add async: true and defer: true:

script: [
  {
    src: "https://some-website.com/stuff.js",
    body: true,
    async: true,
    defer: true
  }
]
Enter fullscreen mode Exit fullscreen mode

This is equivalent to have <script type="text/javascript" src="https://some-website.com/stuff.js" async defer></script>

Not sure what async or defer does in JS? This article should help.

Non vue-meta alternative

If you want a more 'manual' alternative to vue-meta, you can insert it through the DOM vanilla JS way using Vue's mounted lifecycle:

// pages/some/page.vue

export default {
  mounted() {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://some-website.com/stuff.js";
    document.body.appendChild(script);
  }
}
Enter fullscreen mode Exit fullscreen mode

This trick does:

  1. Waits for DOM is mounted
  2. Creates script element
  3. Appends it to body

Conclusion

There are times when you have to load third-party library without npm install. Luckily, Nuxt provides an easy way using vue-meta. Alternatively, you can always modify DOM to insert it yourself using Vue's mounted lifecycle method. The latter works with vanilla Javascript.

Thanks for reading. Happy coding!

Resources

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bnt ☕

Hello ! Don't hesitate to put colors on your codeblock like this example for have to have a better understanding of your code 😎

console.log('Hello world!');
Enter fullscreen mode Exit fullscreen mode

Example of how to add colors and syntax in codeblocks

Collapse
 
rohh_thone_b303eead982d41 profile image
Rohh Thone

*hi there, cool staff. *