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

Where is the file located? In public? Tried with /script.js? — kissu
– 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
– 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
– 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
– 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
– kissu, Commented Nov 8, 2022 at 10:04

MrIsaacs · Accepted Answer · 2023-12-29 19:33:32Z

12

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

edited Dec 29, 2023 at 19:33

MrIsaacs

896 bronze badges

answered Nov 10, 2022 at 12:19

Muhammad Mahmoud

1,0092 gold badges9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sebastian Over a year ago

worked for me on Nuxt 3 thank you

Loosie94 Over a year ago

Where do I place script.js?

Muhammad Mahmoud Over a year ago

script.js the code is the path to the scrupt you want to include. So put it wherever you want then specify its path here

samair ali Over a year ago

this works, but the thing is it will load on all pages/components unnecessarily . for example we want to use highchart and we want to load it on just dashboard component we can not do that , i have tried adding useHead but it didnt worked for me , it gives different issues stackoverflow.com/questions/76708986/… see if you can help here

diyifi3030 · Accepted Answer · 2022-11-08 10:16:44Z

2

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

answered Nov 8, 2022 at 10:16

diyifi3030

931 gold badge1 silver badge6 bronze badges

2 Comments

kissu Over a year ago

What's the exact version of your Nuxt package?

diyifi3030 Over a year ago

3.0.0-rc.13 @kissu

Collectives™ on Stack Overflow

nuxtjs 3 add external javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related