Noscript HTML support

[andreasvirkus]

Currently it's impossible to set HTML inside the noscript tag, as textContent is used for setting children. But for setting up GTM, it'd be great to also support their noscript setup:

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

Which atm gets escaped:

<noscript>
  &lt;iframe
    src=&quot;https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX&quot;
    height=&quot;0&quot;
    width=&quot;0&quot;
    style=&quot;display: none; visibility: hidden&quot;
  &gt;&lt;/iframe&gt;
</noscript>

Another use-case could be someone wanting to render an image/gif in a noscript tag, which would also be impossible atm.

A workaround for now is using a dynamic component (credit to vuejs/vue#8996 (comment)):

<component is="noscript">
  <iframe
    :src="`https://www.googletagmanager.com/ns.html?id=${GOOGLE_TM_ID}`"
    height="0"
    width="0"
    style="display: none; visibility: hidden"
  ></iframe>
</component>

[harlan-zw]

This is supported using any of the v1 RC's

[andreasvirkus]

Thank you sir!

[MuhammadM1998]

I know that Nuxt is using vueuse/head so I should be able to implement that directly yet I haven't figured out how and the docs isn't helping

noscript = [
  {
    children: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe>`,
  },
];

the above results in this

<noscript>
  "<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"  height="0" width="0" 
  style="display:none;visibility:hidden"></iframe>"
</noscript>

how to get rid of the double quotes?

[harlan-zw]

@MuhammadM1998 This is just how chrome displays it when you inspect the element, check the HTML source and you'll see there are no quotes there.

Alternatively just make a plain HTML doc and insert this HTML and you can replicate the same thing

[MuhammadM1998]

@harlan-zw I checked the source and you're right. Thanks!

[andreMariano90]

I was testing it, and although it looks correct when downloading the final source code, it doesn't look right when looking at the source tab, as if the iframe page wasn't properly loaded.
Loading in the standard way: https://imageup.me/p08

Loading using useHead and NoScript: https://imageup.me/p09.

@harlan-zw we might need to re-open it or have some recipe on the docs to make sure it works properly

[harlan-zw]

Please make a reproduction with separate issue @andreMariano90, code looks fine and works correctly according to this issue afaik