vueuse/head

Client hydration is patching without boolean attributes

Closed this issue · 5 comments

harlan-zw commented

Issue

we have a use case where any script tag is duplicated on client hydration when it already been rendered on the server

It's possible to have a script load twice when you have a boolean attribute with it, this is because the client side isn't converting the defer to <script src="./script.js" defer>, instead it's <script src="./script.js" defer="true">, causing the node to be remounted.

Reproduction

useHead({
  script: [
    { src: '/script.js', defer: true },
  ],
})
harlan-zw commented

Hey @tkayo

I'm tracking your issue here. If your implementation isn't using a boolean value can you provide some further details so I can replicate.

harlan-zw commented

Have pushed a fix for this in v1.0.0-rc.11. Will keep this open until the issue replication is confirmed.

harlan-zw commented

Closing as this seems to be resolved

tkayo commented

Hey @tkayo

I'm tracking your issue here. If your implementation isn't using a boolean value can you provide some further details so I can replicate.

@harlan-zw will try to whip up something but no our use case is not using Boolean values

harlan-zw commented

Hey @tkayo

Sure thing, happy to investigate if you can provide a reproduction.