3

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?

Ken White
  • 123,280
  • 14
  • 225
  • 444
muell
  • 383
  • 1
  • 15

2 Answers2

4

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.

muell
  • 383
  • 1
  • 15
0

As you already found out, nuxt does not offer a built-in option to set a default title. Setting it in the nuxt.config.ts simply sets it once when starting the app, but not after navigating to a new page. However, it's very easy to do it yourself via middleware:

Simply create a new global middleware file (e.g. middleware/resetMeta.global.ts) and add the following content with your meta default values:

export default defineNuxtRouteMiddleware(() => {
  useSeoMeta({
    title: "My default title",
    description: "My default description"
  })
})

This will reset the meta information every time you navigate to a new page. On the new page you can useHead() to overwrite some of the values or do nothing to keep the default set by the middleware.

Lorion
  • 310
  • 2
  • 10