nuxt.jsnuxt3.jsnuxt-content

Page Title Set By Content Module Does Not Change Back After Navigation


I am using Nuxt 3 and Nuxt Content for my site. I set a default page title inside the nuxt.config.ts file (see Documentation: SEO and Meta), and the Content module sets the title on every page that uses it. However, returning to any other page does not reset the page title. It keeps the value from the last MarkDown file and does not change back to the global page title. Navigating to another MarkDown page changes the title, but it never changes back from the last value set by the module.

I also tried setting the title through the useHead composable instead of the runtime configuration, but with the same result.

Am I doing something wrong, and if so, how can I solve this? Or is this a known bug?


Solution

  • After a lot of searching I found the solution: The package that provides the useHead() composable is mentioned in the Nuxt documentation. Reading through its documentation, I found out that the default strategy in case of multiple useHead() calls (see Tag Deduping) setting a tag that should only exist once - e.g. the title - is simply overriding any older values with the most recent one. That means that since I only called useHead() once either through the nuxt.config.ts file or inside the app.vue file, it was overridden by the content module and then not changed again.

    I thought that declaring an app-wide title would work for every page that doesn't explicitly change it, but it is the other way around: Every page that doesn't want to keep the title from the page opened before it needs to declare its own title. Since the only other strategy mentioned apart from replacing is merging the values, which for the title doesn't make any sense, I think that this is the intended - and only - way to solve this.