External Javascript files in nuxtjs

Question

I am basing a website on an old tutorial, which uses 3 external js files. I am not able to recreate this using nuxtjs.

First, I tried to include the js files before the tag.

nuxt.config.js

head: {
    script: [
      { src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
    ]
  },

This works on initial page load. However, as soon as I change the page, the js files are ignored.

---

After some research, I tried to include the files as a plugin, to avoid ssr.

nuxt.config.js

plugins: [
    { src: "plugins/imagesloaded.pkgd.min.js", mode: 'client' },
    { src: "plugins/TweenMax.min.js", mode: 'client' },
    { src: "plugins/demo.js", mode: 'client' }
  ],

This gave me multiple error messages (amongst other things: 'Cannot read property addEventListener of null).

This is a very small project with a lot of time pressure, so any kind of help would be highly appreciated!

---

Update:

Original GitHub repository.

Answer 1

Solution - steps to follow:

---

Add base.css to static > css folder, and also add all of the js files to static > js folder and then reference everything in nuxt.config.js:

    link: [
      { rel: 'stylesheet', type: 'text/css', href: 'css/base.css' }
    ],
    script: [
      { src: 'js/imagesloaded.pkgd.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/TweenMax.min.js', type: 'text/javascript', body: true, defer: true },
      { src: 'js/demo.js', type: 'text/javascript', body: true, defer: true }
   ]

Add all of the images to static > img folder and edit the base.css in order to reference images in base.css - write (wherever the images are referenced (2 places)): url('../img/1.jpg')

In the Vue template, copy-paste the HTML as-is.

When it comes to referencing images in the Vue template you would simply do:

<div class="background" style="background-image: url(img/1.jpg)"></div>

That is it. It should work just fine.

---

I created a GitHub repository so you can have a look and see how I have done it.

---

You can also view it live on CodeSandbox.