N
Nuxt•2mo ago
deStrO

Script in head not in the listed order

Hello, I've added script on the head part (in nuxt.config), but the listed script is injected in the wrong order. I've script with "children" and script with "src", and it place everytime the script with src in the earliest position but it's at the end of my array. Is there a way to control the "priority" of scripts ? I tried the tagPriority thing, but it's not working too
5 Replies
kapa.ai
kapa.ai•2mo ago
Hi @deStrO. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your frustration with script ordering in the head section. Nuxt provides several ways to control the order of scripts in your HTML head. Controlling Script Order You can use the order property to control the priority of scripts in your head configuration. Lower numbers run first, and the default value is 0. For more granular control, you can set values between -20 for scripts that should run before others and 20 for scripts that should run after. 
useHead({
  script: [
    {
      children: '/* Your inline script */',
      order: -10 // This will run before scripts with default order
    },
    {
      src: '<https://example.com/script.js',>
      order: 10 // This will run after scripts with default order
    }
  ]
})
useHead({
  script: [
    {
      children: '/* Your inline script */',
      order: -10 // This will run before scripts with default order
    },
    {
      src: '<https://example.com/script.js',>
      order: 10 // This will run after scripts with default order
    }
  ]
})
Alternatively, you can use the tagPosition property to control where in the document your scripts are placed. Valid values are: - 'head' (default) - 'bodyOpen' (beginning of body) - 'bodyClose' (end of body) Stack Overflow Post > How to add inline script tags to Nuxt 3? mentions that for inline scripts, you should use the textContent property rather than children: 
useHead({
  script: [
    {
      textContent: '/* Your inline script */',
      order: -10
    },
    {
      src: '<https://example.com/script.js',>
      order: 10
    }
  ]
})
useHead({
  script: [
    {
      textContent: '/* Your inline script */',
      order: -10
    },
    {
      src: '<https://example.com/script.js',>
      order: 10
    }
  ]
})
If you're still having issues with script ordering, it might be related to how Nuxt processes these configurations internally. Recent updates to Nuxt have addressed some ordering issues, as seen in this pull request which ensures payload scripts execute before loading entry. Remember that these configurations work both in the useHead() composable and in your nuxt.config.ts file under the app.head property. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@230293506181038080> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
deStrO
deStrOOP•2mo ago
The order thing doesn't work, controling it with tagPosition is working but only to place it in the body
Cue
Cue•2mo ago
use tagPriority
Cue
Cue•2mo ago
https://unhead.unjs.io/docs/guides/positions#using-tagpriority
Unhead
Tag Placement · Unhead
How tags are position in the DOM and how to configure them.

Did you find this page helpful?