bridge
bridge copied to clipboard
nuxt
useMeta doesn't seem to render server-side
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:
- https://github.com/nuxt/nuxt.js/issues/12814
- https://github.com/vueuse/head/issues/44
- https://github.com/nuxt/nuxt.js/issues/12980
- https://github.com/vueuse/head/issues/45
Potentially relevant related PR:
- https://github.com/nuxt/framework/pull/2419
Logs
No response
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: https://github.com/saadeghi/daisyui/issues/249#issuecomment-1005507547
The issue only happens when ssr is set to true.
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.
