How to load local JS file with nuxt

Question

I have multiples script in my folder /assets/js. I added them to nuxt.config.js like that:

script: [
  { src: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' },
  { src: '~assets/js/bootstrap.min.js' },
  { src: '~assets/js/retina-1.1.0.js' },
  { src: '~assets/js/jquery.hoverdir.js' },
  { src: '~assets/js/jquery.hoverex.min.js' },
  { src: '~assets/js/jquery.prettyPhoto.js' },
  { src: '~assets/js/jquery.isotope.min.js' },
  { src: '~assets/js/custom.js' }
],

There is no problem for the first one but for the local files none are loading. I tried : '@/assets', '/assets', 'js/', '~/assets', etc but nothing is working.

I always get this error:

GET http://localhost:3000/~assets/js/custom.js net::ERR_ABORTED

So how can I load my files please ? Thank you

Solution 1

Try to put the JS files in the root of the assets directory. Otherwise, you need to create a static directory. I hope this helps.

In your nuxt.config.js

head: {
    link: [{
        rel: 'icon',
        type: 'image/x-icon',
        href: '/favicon.png'
    }],
    script: [
        {
            type: 'text/javascript',
            src: 'js/jquery.min.js',
            body: true
        },
        {
            type: 'text/javascript',
            src: 'js/script.js',
            body: true
        }
    ]
}

Solution 2

your js files must be in the static path folder and add this code to your *.vue files to use

export default {
    head() {
    return {
      link: [
        {
          rel: "stylesheet",
          href:
            "/assets/css/style.css"
        },
      ],

      script: [
        {
          src: "assets/js/style.js",
          body: true
        },],}
      }

Comments

[Splinteer]

Moved to static directory and it worked like that: { src: 'js/bootstrap.min.js' }, Thank you

[Splinteer]

Sorry but it was 4 years ago. Vuesjs is getting popular now ?

[Javad.mrz]

If you take a look at the git hub, you will find that vue is even more popular than react. And it is becoming more popular every day

[Splinteer]

It’s crazy that I was using it 4 years ago and it’s was hard to find help about it

[Marnix Elling]

I moved instafeed.min.js to the root of static and added script: [{ type: 'text/javascript', src: 'js/instafeed.min.js', body: true }] to the head object in nuxt.config.js but when I try to verify its linked by opening the file in a new tab it says /* script not found */