How to load script files in Nuxt Js project properly

Question

I am trying to use a HTML/CSS/JS template, which contains JQuery, plugins and some other script files, in a Nuxt JS project. I have included all the script files in nuxt.config.js file. Whenever I run the project I get these errors: \

This is my nuxt.config.js file:

...
script: [
      {
        src: "/js/jquery-2.1.4.min.js",
      },
      {
        src: "/js/mfn.menu.js",
        body: true,
      },
      {
        src: "/js/jquery.jplayer.min.js",
        body: true,
      },
      {
        src: "/js/animations.js",
        body: true,
      },
      {
        src: "/js/translate3d.js",
        body: true,
      },
      {
        src: "/js/scripts.js",
        body: true,
      },

      {
        src: "/plugins/jquery.themepunch.tools.min.js",
        body: true,
      },
      {
        src: "/plugins/jquery.themepunch.revolution.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.video.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.slideanims.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.actions.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.layeranimation.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.kenburn.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.navigation.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.migration.min.js",
        body: true,
      },
      {
        src: "/plugins/revolution.extension.parallax.min.js",
        body: true,
      },
      {
        src: "/js/on.load.js",
        body: true,
      },
...

Could somebody tell me what I am doing wrong, please?

Answer 1

Alright, here is the answer for the 3rd party scripts: https://stackoverflow.com/a/67535277/8816585

And here is how to configure jQuery into a Nuxt project: https://stackoverflow.com/a/68414170/8816585

Also, give a read to the plugins documentation to be sure how to use those. And prefer using npm packages rather than importing some static min.js file.

I'd even say, prefer to avoid jQuery packages as much as possible since Vue gives you all the capabilities of jQuery and even more, having both of them is a waste of JS (impacts performance for the end user).

---

If you still have some issues after those ones (thorough read), feel free to update your question with any additional info!