vueuse/head

Ability to add arbitrary tags and comments into <head>

pierres opened this issue · 4 comments

pierres commented

Currently useHead() implements a whitelist of tags that can be added into the <head> element. I need to add an ESI tag or an HTML comment to load assets originating from another service. These needs to be added conditionally, so even if Nuxt 3 would allow overriding its app.html a solution within useHead() would be best.

To illustrate, I am currently using this hack:

<template>
    <Style v-if="isServer" :children="myCustomTag" />
    <NuxtPage/>
</template>

<script setup>
const isServer = process.server
const myCustomTag = ' </style> <!--esi <esi:include src="/foo/bar" />--> <style> '
</script>

This inserts the comment at the cost of two empty <style> tags. Obviously this can only be a temporary workaround.

I am unsure what the best API would be, maybe just teleport all child elements of <Head> into <head>. E.g:

<Head>
  <!--esi <esi:include src="/foo/bar" />--> 
</Head>
WebMechanic commented

I guess the skys won't tumbling down, if you use plain JS to add a comment node
https://developer.mozilla.org/en-US/docs/Web/API/Document/createComment

pierres commented

This requires access to "document" which was not available in the server side nodejs environment.

WebMechanic commented

ok, wasn't aware of the server side

harlan-zw commented

Sorry but I don't think this will be implemented, at least anytime soon. It adds too much complexity to the code and scope for issues.

You should use Nuxt's render html hook if you need something like this https://v3.nuxtjs.org/api/advanced/hooks#nitro-app-hooks-runtime-server-side