Adding local JS files to Nuxt 3

Question

I'm trying to add some local js files available in my assets/js folder, but to no success.

The error I get is: http://localhost:3001/assets/js/app.js net::ERR_ABORTED 404 (Page not found: /assets/js/app.js)

The way I try to do it is by adding it in nuxt.config.js:

app: {
  head: {
    script: [
      {'src': 'assets/js/plugins.init.js', body: true},
      {'src': 'assets/js/app.js', body: true}
    ],
  },
},

and I tried adding it in the page as well:

useHead({
script: [
{
    src: `assets/js/app.js`,
    body: true,
    defer: true
},
{
    src: `assets/js/plugins.init.js`,
    body: true,
    defer: true
},
],
})

What am I doing wrong? and how can I solve this issue?

Answer 1

Add your js file in public directory which we call static in nuxt2

NOTE: body property is deprecated instead you need to use tagPosition

See more here

In your pages

useHead({
script: [
  {
    src: `/app.js`,
    tagPosition: 'bodyClose'
    defer: true
  },
 ],
})

In you nuxt.config.ts

app: {
  head: {
    script: [
      {'src': '/plugins.init.js', tagPosition: 'bodyClose'},
      {'src': '/app.js', tagPosition: 'bodyClose'}
    ],
  },
},