Nuxt•3w ago

How can I implement an inline script on page?

Something like <script>console.log('hello world')</script> I need to implement the inline script that way because it's a third-party script

4 Replies

kapa.ai•3w ago

Hi @Phillip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement an inline script in Nuxt 3, you can use the useHead() utility or configure it in the nuxt.config.ts file. Here's how you can do it: Using the useHead() utility in a component or page:

useHead({
  script: [
    {
      textContent: `console.log('hello world')`,
      tagPosition: "bodyClose",
    },
  ],
});

useHead({
  script: [
    {
      textContent: `console.log('hello world')`,
      tagPosition: "bodyClose",
    },
  ],
});

Alternatively, you can add it to the nuxt.config.ts file:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          textContent: `console.log('hello world')`,
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          textContent: `console.log('hello world')`,
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

The textContent property allows you to add inline script content directly. The tagPosition property determines where the script tag will be placed in the document. Valid values are 'head', 'bodyClose', or 'bodyOpen'. It's important to note that this method is safe for adding third-party scripts. However, be cautious when using user input in scripts. For user input, it's recommended to use textContent instead of innerHTML to prevent potential XSS vulnerabilities. Stack Overflow: How to add inline script tags to Nuxt 3? (https://stackoverflow.com/questions/78121968) Remember that while this method works, for more complex third-party script integrations, you might want to consider using the Nuxt Scripts module, which provides additional features for managing and optimizing third-party scripts in your Nuxt application. Nuxt Scripts: Third-Party Scripts Meets Nuxt DX (https://scripts.nuxt.com) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@728986061098713110> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PhillipOP•3w ago

Already tried this. Not working.

harlan•3w ago

use innerHTML instead of textContent

Gaming

Programming

How can I implement an inline script on page?