useMeta doesn't seem to render server-side

[tylerforesthauser]

Environment

Nuxt CLI v3.0.0-27366343.1d741cb
RootDir: /sandbox
Nuxt project info:

---

• Operating System: Linux
• Node Version: v14.18.1
• Nuxt Version: 2.16.0-27358576.777a4b7f
• Package Manager: [email protected]
• Bundler: Webpack
• User Config: head, components, modules, css, plugins, bridge, buildModules
• Runtime Modules: -
• Build Modules: @nuxt/[email protected]

---

Reproduction

https://codesandbox.io/s/nuxt-2-bridge-usemeta-render-issue-4ibyf

Describe the bug

When using Nuxt 2 with Nuxt Bridge and with the useMeta composable enabled, the metadata added via useMeta doesn't seem to be added server-side. This can be observed using the linked reproduction repo (separate window) and then viewing the page source. You'll see that the added title and style tags are not present in the head. Obviously this is not good for SEO, amongst other things.

Referring to a now closed PR that seemed to address this issue, I was able to craft a fix — https://codesandbox.io/s/fix-nuxt-2-bridge-usemeta-render-issue-txxnp (separate window). Loading that page and then viewing the source reveals the added meta info in the head, as expected.

I'm not knowledgeable enough to propose the above "fix" as a globally appropriate solution but I'm sure it could lead someone down the path to some kind of remedy for this behaviour.

Additional context

Potentially relevant related issues:

• Meta scripts execute multiple times on a single load nuxt#12814
• do not recreate old element tags that already exist vueuse/head#44
• useMeta removes existing tags and then adds them all again nuxt#12980
• don't recreate <style> tags if we're able to dedupe vueuse/head#45

Potentially relevant related PR:

• fix(nuxt3): don't immediately trigger update dom framework#2419

Logs

No response

[Destaq]

This issue also occurs with Nuxt 3 projects; if you create a pages directory, useMeta is first applied, then removed, and then reapplied.

When having a Nuxt 3 app with no pages/ folder, just app.vue, useMeta is applied before page render.

With the exact same configuration, but the addition of pages, any htmlAttrs in useMeta are applied after page render - a big problem as I'm using it to control the theme of my web app.

You can find a sample configuration here: saadeghi/daisyui#249 (comment)

The issue only happens when ssr is set to true.

[toniengelhardt]

Same issue with Nuxt 3, meta title, -description, etc. defined with useMeta() are rendered by the dev server but stripped out in production with SSR.