Include a custom script in the head tag in nuxt

Question

I have a custom script that I want to include in my nuxt project.

The thing is, this script needs to be included before the dom loads. It contains overrides for this particular project.

My assets folder is structured with a scripts subfolder:

In my nuxt.config.js file I've got this:

export default {
  css: ["~/assets/css/main.scss"],
  head: {
    script: [
      {
        src: "https://cdnjs.cloudflare.com/ajax/libs/aframe/1.0.4/aframe.min.js", 
        src: "_nuxt/assets/scripts/bundle.js", // this is the script that I'm trying to include
      },

I added the _nuxt/ after looking at how some of the other assets are being successfully included

All of the stuff we need to happen before the dom is loaded is already bundled up in the file and, even though it's unconventional, this would work if we could get it to load.

I've looked through the nuxt docs about the head property either in this config or in the actual .vue files, but it talks about external resources and not those local to the project.

How would I properly include this file in the head within nuxt?

Also, if there's a proper way of bundling the source code for this bundle separate from the main nuxt js code so that it can pass through nuxt/tsc properly I'm def open to it.

user_1934903 · Answer

I got it working using a solution posted by @Ifaruki on this question, but I see they deleted it yesterday so I can't accept it as the correct answer. @Ifaruki if you un-delete or re-answer I'll give you the checkmark. Not sure why you deleted it.

The solution was to use the static directory in nuxt. I didn't realize there was a static folder because I'm inheriting this codebase from someone else and either the nuxt project generator doesn't add the static folder by default or the original dev removed it.

Either way, if there is a static folder at the root of a nuxt codebase will map that to the server root, meaning you can access the files in the folder with a url. When looking over the codebase I assumed this would be the assets folder considering other files are served in that fashion, but adding a scripts folder to assets does not make the scripts folder accessible. Considering there's a note in the docs for the static folder reading ...

This directory cannot be renamed without extra configuration.

...I'm assuming that assets' subfolders have a similar hard-coded folder name thing. Not sure, don't feel like doing the code dive to figure it out.

Regardless, I created a static folder at the root of the website with a js subfolder, moved the bundle.js file into the subfolder, and updated my nuxt.config.js file to include the bundle file in the head like so:

NOTE that the static is left out of the path in the head value, the static folder name itself isn't exposed at the server root so you need to leave it off.

Now the bundle.js file loads as expect. From here I'm looking into how I can add this file in a cleaner, less manual-move-into-place fashion, but this will get me moving for now.

Thanks for the help @Ifaruki!

Include a custom script in the head tag in nuxt

1 Answers