Hi, first of all, thank you very much for your hard work. The is

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Amazing, thanks <a class="user-mention notranslate" data-hovercard-type="user" data-ho

@vueuse/head not working properly with vite-plugin-ssr in SSR mode about head HOT 6 CLOSED

SquirrelCoder commented on August 20, 2024 2

@vueuse/head not working properly with vite-plugin-ssr in SSR mode

from head.

Comments (6)

harlan-zw commented on August 20, 2024 2

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.

from head.

brillout commented on August 20, 2024 2

FYI the next vite-plugin-ssr version will warn the user when this happens.

from head.

SquirrelCoder commented on August 20, 2024 1

oh shoot, I'm sorry, yeah that makes total sense. Thanks a lot.

from head.

SquirrelCoder commented on August 20, 2024 1

@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>`);

from head.

commented on August 20, 2024

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);