Nuxt•2mo ago

Insert html in head

Hi there, I'm fetching some seo data from a wordpress plugin but it is returning string how can I insert that in the head, Thanks

13 Replies

pyplacca•2mo ago

https://nuxt.com/docs/api/composables/use-head-safe

Nuxt

useHeadSafe · Nuxt Composables

The recommended way to provide head data with user input.

Muhammad Awais•2mo ago

I have only a string of html coming as a response how can I insert that whole string in the head

IsraelOrtuno•2mo ago

something like document.head.appendChild could work

IsraelOrtuno•2mo ago

https://stackoverflow.com/questions/22211584/using-document-head-appendchild-to-append-a-script-tag-that-has-an-src-attribu

Stack Overflow

Using document.head.appendChild() to append a script tag that has a...

Any reason why the following code isn't working? alert("1"); document.head.appendChild("<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js\"></script>"); ale...

IsraelOrtuno•2mo ago

couple of examples there

pyplacca•2mo ago

You’d usually insert as is. Check the usage section

Muhammad Awais•2mo ago

It requires to pass script meta and title tags seperatly but in my response I can't not pass them seperatly

pyplacca•2mo ago

What if you parsed the string, extracted the parts you need, and then inserting them into the head using the composable? You can use cheerio to handle the parsing. PS: cheerio can be slow sometimes, but it’s useful for such SSR needs

cheerio | cheerio

Classes

Muhammad Awais•2mo ago

Yes I'm already using it but It seems as if it makes the js bundle large and too much unused javascipt is shipped not very good in terms of performance

pyplacca•2mo ago

Yhh. That’s one let down with cheerio

pyplacca•2mo ago

I don’t know if this would work but you can try it out. If it does work, I would think it’s safe or recommended either.

<template>
  <div>
    <Head v-html="your_html_string"/>
    …
  </div>
</template>

<template>
  <div>
    <Head v-html="your_html_string"/>
    …
  </div>
</template>

https://nuxt.com/docs/getting-started/seo-meta#components

Nuxt

SEO and Meta · Get Started with Nuxt

Improve your Nuxt app's SEO with powerful head config, composables and components.

Muhammad Awais•2mo ago

Surprisingly it works on the initial load but for other pages it doesn't replace the head on client side and on SSR doesn't insert anything in head

Alap•2mo ago

I have same problem.

Gaming

Programming

Insert html in head