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

Cognizant

https://mcmap.net/q/745156/-how-to-add-external-js-file-in-nuxt you can check this response. It solved my problem – Peroxidize

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

Alienable

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

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 */ – Baggy

I tried this and different other ways but still can't get it right. Could anybody update this answer and show us the way to do it now ? Please....It is kind of a stumbling block for me right now – Trussell

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

Andy

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

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 – Andy

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

Answer 3

With Nuxt 3, I had to add Js files in the "public/assets/" folder. like that:

• Public/assets/js/file-name1.js
• Public/assets/js/file-name2.js

in nuxt.config.ts: src: must start with "/assets/".

app: {
  head: {
     script: [  
         { tagPosition: 'bodyClose', src: '/assets/js/file-name1.js' },
         { tagPosition: 'bodyClose', defer: "true", src: '/assets/js/file-name2.js' },
     ]
  }
}

Weide

Answer 4

<template>
  <img src="~/assets/your_image.png" />
</template>

or

background: url('~assets/banner.svg');

or

<img :src="require(`~/assets/img/${image}.jpg`)" />

https://nuxtjs.org/docs/2.x/directory-structure/assets/

Note:

The ~/ alias won't be resolved correctly in your CSS files. You must use ~assets (without a slash) in url CSS references, i.e. background: url("~assets/banner.svg")

Antiquary