I tried to add an external javascript file to nuxt.config.ts. but nuxt didn't load the file.

nuxt.config.ts file:

export default defineNuxtConfig({

    css: [
        'bootstrap/dist/css/bootstrap.min.css'
    ],
    script: [
        {
            src: 'script.js',
        }
    ],
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    }
})

I tried to add an external javascript file to nuxt.config.ts. but nuxt didn't load the file.

nuxt.config.ts file:

export default defineNuxtConfig({

    css: [
        'bootstrap/dist/css/bootstrap.min.css'
    ],
    script: [
        {
            src: 'script.js',
        }
    ],
    vite: {
        define: {
            'process.env.DEBUG': false,
        },
    }
})

• javascript
• nuxt.js
• nuxt3.js

• Where is the file located? In public? Tried with /script.js? – kissu Commented Nov 8, 2022 at 8:16
• yes I already tried but didn't work. I guess because nuxt.config is a typescript file it doesn't work but i can't fix it. @kissu – diyifi3030 Commented Nov 8, 2022 at 8:22
• TS is not a blocker by itself (types is something else). Did you tried that one? What kind of issue do you have exactly? Can you see something in your network tab? – kissu Commented Nov 8, 2022 at 8:32
• Didn't work again. there is no request in the network tab, but i have this error in my ide: "TS2345: Argument of type '{ css: string[]; script: { src: string; defer: boolean; }[]; }' is not assignable to parameter of type 'NuxtConfig'. Object literal may only specify known properties, and 'script' does not exist in type 'NuxtConfig'." @kissu – diyifi3030 Commented Nov 8, 2022 at 9:47
• Yeah, it provides you an explanation so far. As shown in my previous comment, script should be inside of meta. – kissu Commented Nov 8, 2022 at 10:04

2 Answers 2

The correct way to load scripts in Nuxt 3 is by using the head object in app (See more in Official Docs here)

In your case, This should work.

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'stylesheet', href: 'bootstrap/dist/css/bootstrap.min.css' },
      ],
      script: [{ src: 'script.js' }],
    },
  },

  vite: {
    define: { 'process.env.DEBUG': false },
  },
});

head contain meta, script, link, style and no-script tags, so if you want to write any of them you'll use the same approach

I tried many ways and this is the only way it's worked.

export default defineNuxtConfig({
css: [
    '@/css/bootstrap.rtl.min.css'
],
app: {
    head: {
        script: [
            {
                src: '_nuxt/js/bootstrap.bundle.min.js',
            }
        ],
    }
}
})