Igor Irianto

Posted on Feb 25, 2020 • Updated on Jun 15, 2021 • Originally published at irian.to

How to load external script in Nuxt app

#nuxt #javascript #script #stylesheet

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>

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"
        }
      ]
    }

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
  }
]

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
  }
]

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);
  }
}

This trick does:

Waits for DOM is mounted
Creates script element
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!