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.

Jakub A Suplicki · Accepted Answer · 2020-06-23 03:45:16Z

6

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.

edited Jun 23, 2020 at 3:45

answered Jun 22, 2020 at 22:01

Jakub A Suplicki

4,8211 gold badge27 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

kampfkuchen Over a year ago

Thank you for your response! It looks better than before. However, I am still getting some error messages, like TypeError: Cannot read property 'addEventListener' of null, or TypeError: Cannot read property 'addEventListener' of null. Which makes me suspicious about this being loaded on the client...

Jakub A Suplicki Over a year ago

Can you try importing it one by one like that and see if there is a particular file that causes this issue, please (possibly demo.js)?

kampfkuchen Over a year ago

Yes, it is the demo.js file. Everything else works perfectly with your method.

kampfkuchen Over a year ago

That is very helpful. Thank you! I added the entire content of the file to my question.

kampfkuchen Over a year ago

Unfortunately that doesn't help. It is exactly what I already described in my question. As described there: 'This works on initial page load. However, as soon as I change the page, the js files are ignored.' Probably somebody else can profit from this, so I will accept it anyway. Thank you so much for all your effort!

|

Vuzi · Accepted Answer · 2022-04-04 08:32:43Z

-1

To integrate bootstrap within antd-ui for my nuxt js project, this is what worked for me:

in nuxt.config.js, add the following

add boostrap css files in css folder within assets folder:

css: [ 'ant-design-vue/dist/antd.css', '~/assets/css/bootstrap.min.css', '~/assets/css/bootstrap-grid.min.css', '~/assets/css/bootstrap-utilities.min.css' ],
add boostrap js files in js folder within static folder:

plugins: [ '@/plugins/antd-ui', {src: '~/static/js/bootstrap.bundle.min.js', mode:'client'}, ],

This worked for me

answered Apr 4, 2022 at 8:32

Vuzi

1853 gold badges4 silver badges15 bronze badges

Collectives™ on Stack Overflow

External Javascript files in nuxtjs

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related