`useHead()` not setting page title correctly

piet-maier commented 1 year ago

Environment

Operating System: Darwin
Node Version: v16.15.0
Nuxt Version: 3.2.2
Nitro Version: 2.2.2
Package Manager: npm@9.5.0
Builder: vite
User Config: app, content, css, image, modules, plugins, postcss, typescript
Runtime Modules: @nuxt/content@2.4.3, @nuxt/image-edge@1.0.0-27919678.2f5b64b
Build Modules: -

Reproduction

https://stackblitz.com/edit/github-29ub7i?file=app.vue

Describe the bug

Using the useHead() composable and setting either a title or a title template does not work correctly when used in combination with the content module and titles inside the front-matter of the MarkDown files.

For this example (this is also the case for the reproduction), assume that routes starting with /content are generated by the content module, and all other paths are not.

When for example having a index page without a title, a content page /content and using a title template in the form (title) => title ? title : "No Title", the following will happen:

Starting from /, the title will be "No Title. This is correct.
Navigating to /content will change the title to the title attribute of the front-matter of the corresponding MarkDown file. This is also correct.
Navigating back to / will not change the title. The title from /content will stay. Refreshing the page will fix this.
Not refreshing the page in step 3 and then navigating to another non-content page, e.g. /test, which does define its own title using useHead(), will change the title to this value. This is correct again.
Navigating back to / will again change the title to the one from /content (step 2) for some reason???

In my actual project step 3 happens with every non-content page, even if it does define its own title as in step 4. In this case, another navigation to a second page that does define its own title will work as expected. Only the first navigation away from a content page does not change the title. I could however not reproduce this with StackBlitz.

Additional context

No response

Logs

No response

farnabaz commented 1 year ago

This is not related to Content module. This is an issue with Nuxt itself. Demo with Nuxt

This happens when we use useHead after and async-data. /cc @danielroe @pi0

farnabaz commented 1 year ago

I've created an issue on Nuxt repo https://github.com/nuxt/nuxt/issues/19244

harlan-zw commented 1 year ago

I added a comment on the nuxt issue confirming a core issue with async data there.

I did some digging through the useHead implementation here though and noticed a few independent issues.

I believe it's being used outside of the component instance client side, so there aren't going to be any lifecycle events (afaik). With the watcher and calling useHead on every refresh, you have a memory leak. Every time the page changes it's adding new entries which it never disposes of.

Additionally, when you leave a content page, you will still have the entries. For interactions where it needs to remove entries to show the right meta, this is broken.

useHead is completely reactive, so you shouldn't need all of this watching and refreshing logic, you should just have a single instance of useHead which has computed getter data (you can unref in this). If you call it client-side without the nextTick then it should attach the lifecycle events.

Jannchie commented 1 year ago

Is anyone dealing with this? I think this issue has a big impact, but it seems a bit difficult to fix?

harlan-zw commented 1 year ago

nuxt / content