How to load external script in Nuxt app
Tags: nuxt, javascript, script, stylesheet
Published: 2020-02-25 13:24:13

---
title: How to load external script in Nuxt app
published: true
description: Loading external script to Nuxt page
tags: nuxt, javascript, script, stylesheet
canonical_url: https://irian.to/blogs/load-external-script-nuxt
---

Recently I had to load a 3rd party code snippet to my [Nuxt](https://nuxtjs.org/) 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](https://github.com/nuxt/vue-meta)'s `head()` method to insert your script. Luckily, vue-meta comes [preinstalled with Nuxt](https://vue-meta.nuxtjs.org/). 

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](https://javascript.info/script-async-defer) 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](https://vuejs.org/v2/api/#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:

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

- [Vue-meta docs](https://vue-meta.nuxtjs.org/)
- [How to load third party scripts in nuxt js](https://vueschool.io/articles/vuejs-tutorials/how-to-load-third-party-scripts-in-nuxt-js/)
- [GH - External script doesn't always load when added to Nuxt page via "head()"](https://github.com/nuxt/nuxt.js/issues/5052)