nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.68k stars 5k forks source link

Nested Routes + useHead not working correctly #23620

Closed c-schwan closed 1 month ago

c-schwan commented 1 year ago

Environment

Reproduction

https://stackblitz.com/edit/nuxt3-nested-routes-head?file=app.vue

Describe the bug

the body attributes are merged on nested routes.

<body class="scroll no-scroll">

useSafeHead({ bodyAttrs: { class: () => (scroll.value ? 'scroll' : 'no-scroll'), } })

Additional context

No response

Logs

No response

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

danielroe commented 1 year ago

cc: @harlan-zw

harlan-zw commented 1 year ago

Can confirm there is a bug here, something weird going on with the reactivity. The happy path works correctly / -> /child/foo, just not /child/foo -> / -> /child/foo

Chantal5 commented 7 months ago

Any progress on this already? I'm running into the same issue. Also found @harlan-zw 's comment in another topic about this issue, with a workaround for as long as the bug still exists. Perhaps it is a good idea to post it here. This works for now:

onMounted(() => { Object.values(injectHead()._dom?.sideEffects || {}).forEach((fn) => fn()); });

harlan-zw commented 1 month ago

Duplicate of https://github.com/nuxt/nuxt/issues/25938 which will be fixed in the next Unhead release :slightly_smiling_face: