nuxtjs 3 add external javascript

Question

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

Answer 1

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