@vueuse/head not working properly with vite-plugin-ssr in SSR mode
SquirrelCoder opened this issue · comments
Hi,
first of all, thank you very much for your hard work.
The issue mentioned here: #24 still persists.
I have created a sample repository to show the problem.
https://github.com/SquirrelCoder/vite-plugin-ssr-vueuse-head
The tags are set correctly when in CSR mode but in SSR the tags are not there.
Could you please have a look at this issue?
Thanks a lot.
Tagging also @brillout
Hey @SquirrelCoder, thanks for the issue.
I've looked at the repo and it looks like an issue with your setup. You are creating a new head instance after the tags have been rendered in _default.page.server.ts.
const appHtml = await renderToString(app);
const head = createHead(); // this is going to reset all collected head data
const { headTags, htmlAttrs, bodyAttrs, bodyTags } = await renderHeadToString(head);If you need the head instance you should either create it exclusively in this file or you can return it from createApp.
const { app, head } = createApp(Page, pageProps, pageContext);
const appHtml = await renderToString(app);
const { headTags, htmlAttrs, bodyAttrs, bodyTags } = await renderHeadToString(head);Let me know if any of that isn't clear.
oh shoot, I'm sorry, yeah that makes total sense. Thanks a lot.
Hey @harlan-zw
I do how you propose, but i am getting sting of metadata in the body tag
const { app, head } = createApp(pageContext);
const pageHtml = pageContext.Page ? await renderToString(app) : '';
const { headTags, htmlAttrs, bodyTags } = await renderSSRHead(head);
Did I miss something?
I use
vue3, vite-plugin-ssr with ssr and spa mode together
@anatoliidaostreet That's not a problem with vueuse. I have asked the same question here: vikejs/vike#865.
You have to use it like this:
const documentHtml = escapeInject`<!DOCTYPE html>
<html>
<head>
${ dangerouslySkipEscape(headTags) }
</head>
<body>
<div id="app">${ stringApp }</div>
</body>
</html>`;or completely wrap your string in dangerouslySkipEscape. Like the following:
const documentHtml = dangerouslySkipEscape(`<!DOCTYPE html>
<html>
<head>
${ headTags }
</head>
<body>
<div id="app">${ stringApp }</div>
</body>
</html>`);
FYI the next vite-plugin-ssr version will warn the user when this happens.
Amazing, thanks @brillout