nuxt: External script doesn't always load when added to Nuxt page via "head()"

Thanks @rchl. This is the simplest example that I could come up with and it seems to be working:

export default {
  mounted() {
    if (!process.server && !window.jQuery) {
      const script = document.createElement("script");
      script.onload = this.onScriptLoaded;
      script.type = "text/javascript";
      script.src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js";
      document.head.appendChild(script);
    } else {
      this.onScriptLoaded();
    }
  },
  methods: {
    onScriptLoaded(event = null) {
      if (event) {
        console.log("Was added");
      } else {
        console.log("Already existed");
      }
      console.log(window.jQuery);
      window.jQuery("h1").append(` <span>(CDN script has loaded)</span>`);
    }
  }
}

Thanks to vue-meta, this should be way easier now. I’ve wrote a bit about my preferred way in this article.

@markplewis and others: It all works as expected and has to do with how html/JS works, not Nuxt.

In Case 1, you are navigating in SPA fashion to another page and that adds a script and you expect it to be loaded in mounted hook already. That’s false assumption as scripts appended dynamically don’t load in sync fashion. You have to listen to load event to know when they have loaded and only then you can start using code that it defines.

In Case 2 is a slight variation but pretty much same reason for the behavior. It works on reloading the page as then you’ll get the script appended already on the server so it will load synchronously and you’ll have jQuery loaded by the time mounted is fired.

Basically you have to understand the difference between script added programatically (through DOM) and script that is in HTML of the page already. Former will load asynchronously while latter will load synchronously.

So to make this work consistently, rather than using head function, you need to use something like VueScript2 to load script dynamically and wait for it to load. For jQuery this is enough. For other APIs like YouTube you might also need to wait for the API code to tell you that it has loaded because it might have some async initialisation routine that has to run even after script has loaded (refer to APIs documentation how to handle that).

Looks good to me. Something like VueScript2 would abstract that and make it look a bit nicer IMO but this is nice, no-lib solution.

BTW. mounted is only executed on the client so check for !process.server is not needed.

This solve my issue: https://vue-meta.nuxtjs.org/api/#callback

You only need to ensure to add vmid and set the callback

{
  metaInfo() {
    return {
      script: [
        {
          vmid: 'extscript',
          src: '/my-external-script.js',
          callback: () => (this.externalLoaded = true)
        },
        {
          skip: !this.externalLoaded,
          innerHTML: `
            /* this is only added once external script has been loaded */
            /* and e.g. window.$externalVar exists */
          `
        }
      ]
    }
  },
  data() {
    return {
      externalLoaded: false
    }
  }
}

Ops. Sorry, I got totally confused. Yes, Nuxt used hid, not vmid.

This solve my issue: https://vue-meta.nuxtjs.org/api/#callback You only need to ensure to add vmid and set the callback

{
  metaInfo() {
    return {
      script: [
        {
          vmid: 'extscript',
          src: '/my-external-script.js',
          callback: () => (this.externalLoaded = true)
        },
        {
          skip: !this.externalLoaded,
          innerHTML: `
            /* this is only added once external script has been loaded */
            /* and e.g. window.$externalVar exists */
          `
        }
      ]
    }
  },
  data() {
    return {
      externalLoaded: false
    }
  }
}

This works for me, but not when loading the page for the first time. It works only when navigating to the page.

replace vmid with hid might solve the problem

Nuxt uses vmid, not hid. If you are gonna rename it to hid it will likely just act like neither vmid or hid are set, which has its own implications.

EDIT: It’s the opposite.

This solve my issue: https://vue-meta.nuxtjs.org/api/#callback

You only need to ensure to add vmid and set the callback

{
  metaInfo() {
    return {
      script: [
        {
          vmid: 'extscript',
          src: '/my-external-script.js',
          callback: () => (this.externalLoaded = true)
        },
        {
          skip: !this.externalLoaded,
          innerHTML: `
            /* this is only added once external script has been loaded */
            /* and e.g. window.$externalVar exists */
          `
        }
      ]
    }
  },
  data() {
    return {
      externalLoaded: false
    }
  }
}

This works for me, but not when loading the page for the first time. It works only when navigating to the page.

I created this utility function to load external JS file as Nuxt page’s head property doesn’t work. In my case, It only adds <script> to <head> if the page is requested directly, not as a route-view component.

loadJsFile(url, id, onLoadedCallback, defer, async) {
    if (process.browser) {
      let test = document.getElementById(id);
      if (test) return onLoadedCallback();
      else {
        const script = document.createElement("script")
        script.src = url
        script.id = id
        script.onload = onLoadedCallback
        script.type = "text/javascript"
        script.defer = defer == true || defer == undefined ? true : false
        script.async = async == true || defer == undefined ? true : false
        document.head.appendChild(script)
      }
    }
  }

I also faced this issue trying to load the Stripe API (v3) in a page, often it’ll say Stripe library isn’t loaded.