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

Answer 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
        }
    ]
}

Answer 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
        },],}
      }