Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

allow adding scripts within `<body>`

See original GitHub issue

Environment

Nuxt CLI v3.0.0-27319101.3e82f0f

Nuxt project info:

  • Operating System: Windows_NT
  • Node Version: v16.13.0
  • Nuxt Version: 3.0.0-27313139.1c88580
  • Package Manager: npm@8.1.0
  • Bundler: Vite
  • User Config: head, meta, buildModules
  • Runtime Modules: -
  • Build Modules: nuxt-windicss@2.0.15

Reproduction

First Bug/Issue Link:

body: true not working

Second Bug/Issue Link:

linking script globally not working

Describe the bug

Using “body: true” when linking a script will not insert the script into the body

I have a project in which I have a script that runs to get various items from the DOM in order to add an event listener that triggers audio to play. The only problem is that the script loads before the DOM loads because it is located in the head. In Nuxt 2, the body: true part when linking a script positioned the script in the body. However, Nuxt 3 does not seem to be allowing this. My project still works… as of this point, but when I was creating the Codesandbox project that I made to reproduce the issue, it wouldn’t even trigger the function. It returns the item as being “null” because the item is nonexistent when the script loads. Am I linking it correctly? I would think not because it worked with Nuxt 2. Is it different in Nuxt 3 now?

I cannot link the script globally

I’ve tried doing multiple things globally, as this, which may just be the fact that Nuxt 3 is still undergoing development, but I just wanted to bring this up to make sure that it was known about. I have the script linked in the nuxt.config.ts file. However, when I open the dev tools to check the head to see if the script is linked, it’s not there and obviously, nothing works then. I’ve also tried globally declaring the title (would be useful for the project that I am working on now, but generally, probably not) and it won’t work. Declaring it per page works fine (in between the Vue document <script> tags), just not globally per the nuxt.config.ts.

Additional context

No response

Logs

//Logs from body:true bug

Uncaught TypeError: el is null
    <anonymous> https://2gpsk.sse.codesandbox.io/script.js:10
script.js:10:1

[vite] connecting... client.ts:22:8

<Suspense> is an experimental feature and its API will likely change. runtime-core.esm-bundler.js:897:47

Uncaught TypeError: newEl.textContent is not a function
    myFunction https://2gpsk.sse.codesandbox.io/script.js:3
    EventListener.handleEvent* https://2gpsk.sse.codesandbox.io/script.js:10
script.js:3:9

​

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
harlan-zwcommented, Aug 2, 2022

This is now supported in the latest nuxt v3 fyi, https://github.com/nuxt/framework/issues/5014#issuecomment-1200140609 & https://github.com/vueuse/head/pull/67

useHead({
  script: [
    {
      children: `console.log('Hello world!')`,
      body: true
    },
  ],
})
2reactions
bmlyoncommented, Aug 16, 2022

This is now supported in the latest nuxt v3 fyi, #5014 (comment) & vueuse/head#67

useHead({
  script: [
    {
      children: `console.log('Hello world!')`,
      body: true
    },
  ],
})

In case anyone else is having trouble with this, there’s an example in the official documentation at

https://v3.nuxtjs.org/guide/features/head-management/

Scroll down to the “Body Meta Tags” section.

<script setup>
useHead({
  script: [
    {
      src: 'https://domain/path/some-filename.js',
      body: true
    }
  ]
})
</script>

I added this to my AppLayout component, but I imagine it could be used in many different locations.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Where should I put <script> tags in HTML markup?
The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag,...
Read more >
All about <script> - Level Up Coding
You can place any number of scripts in an HTML document. Scripts can be placed in the <body> , or in the <head>...
Read more >
How To Add JavaScript to HTML | DigitalOcean
You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script>...
Read more >
Where to put a script tag — into head or body end? - Medium
You see, there is no need to place script tags at the body end just to ensure that the script is executed once...
Read more >
How to insert external JavaScript code into body section of html?
Hi team, I'm currently trying to use an open-source JavaScript library in my OutSystems Web project and those external JavaScript code MUST be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

incorrect importing path of es module with @ in path in production mode

Next page

ERROR [proxy] connect ENOENT /var/folders/ff/../nitro/worker-...sock