Nuxt: Include 3rd party library in Vue Page component

Imagine you want to include a 3rd party js library (eg Three.js) in a Vue page, via Nuxt.

Local sources in the head section of either nuxt.config.js or YourPage.vue do not work:

  head: {
    script: [
      { src: '~assets/lib/three.min.js' }
    ]
  }

The above just results in a 404 http://yoursite/~assets/lib/three.min.js NOT FOUND.

In your page component, you can specify a remote src:

  head: {
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js' }
    ]
  }

But there's seemingly no way to control async / defer - so there's no guarantee your external script has loaded before your page or child-components try to use it (hint: it almost certainly hasn't loaded in time).

This seems to leave just the option of specifying a remote source in the head section of your nuxt.config.js. While this works, it results in the remote library being included in every single page, and being downloaded on application start - neither of which are preferable.

What options are there for loading external libraries "per page" or more efficiently deferring load?

via duncanhall