Title breaking during page transitions

[BenjaminOddou]

trafficstars

Environment

---

• Operating System: Darwin
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.6
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, buildModules, schemaOrg, image, colorMode, css, pwa, vite
• Runtime Modules: @nuxtjs/[email protected], @kevinmarrec/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @pinia/[email protected], [email protected]
• Build Modules: @nuxt-modules/[email protected]

---

Reproduction

Stackblitz Repo Link

Describe the bug

Hello 👋,

I noticed that the title of my pages defined following the Nuxt 3 documentation about Head Management was not working during my page transitions. The first part of the titleTemplate (${title}) is null during the transition.

in my app.vue :

<script setup>

useHead({
  titleTemplate: (title) => `${title} | Title Site`,
});

</script>

in my pages :

<script setup>

useHead({
  title: 'Title of the Page',
});

</script>

Additional context

No response

Logs

Not sure if that's related but I have this log in the terminal:

[nitro] Error while generating error response FetchError: 404  (/__nuxt_error?url=/_nuxt/entry.0f70add3.css&statusCode=404&statusMessage=Cannot+find+static+asset+/_nuxt/entry.0f70add3.css&message=Cannot+find+static+asset+/_nuxt/entry.0f70add3.css&description&data)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.errorhandler [as onError] (file:///Users/User/Documents/project/.output/server/chunks/nitro/node-server.mjs:323:16)
    at async Server.nodeHandler (file:///Users/User/Documents/project/.output/server/node_modules/h3/dist/index.mjs:389:9)

[BenjaminOddou]

https://user-images.githubusercontent.com/85166574/181282240-fb9aa3b9-fc9d-4bcc-8aa4-4e0946c4a149.mov

[BenjaminOddou]

@danielroe @pi0 Thank you for the great work on the last Nuxt release 🙂. However this problem persist with the new version of Nuxt 3 RC-7. I updated the Stackblitz repo

[danielroe]

This is not a recent change. It's caused by the gap between when useHead removes the title set by the old page and sets the title of the new page. (Here's a reproduction on rc3.) It's likely. a tricky problem to solve..

[ILLuMiNaTe7]

This is not a recent change. It's caused by the gap between when useHead removes the title set by the old page and sets the title of the new page.

For some reason, this is even occurring when doing the initial load onto the website. Transitioning from Page A to Page B no longer seems an issue. At least not for me.

If you go to an Nuxt 3 site the title jumps from: "Page A - Site" > " - Site" > "Page A - Site".

So it goes legit from Correct to incorrect and then finally fixes itself.

[BenjaminOddou]

Ok my side, I still have the issue when transitioning from Page A to Page B with nuxt rc-10

[dpmango]

In my case title jumps ABC -> default title -> ABC when simply refreshing the page without any navigation rc.10

/pages/foo/index.vue - setup()

useHead({
  title: 'ABC',
  meta: [...]
})

nuxt.config.js

  app: {
    head: {
      title: 'default title',
    }
}

Using without app.head or without app render ABC - empty - ABC title during load.

not sure whats affecting title, the the page I'm testing on calls useHead just once

[danielroe]

Would welcome @harlan-zw's input on this one. My reading is that this is a natural gap between the unmounting of a previous component and <Suspense> resolving when the new page's setup is ready. It's possible we might be able to resolve, either directly in vueuse/head - or perhaps using an API it exposes?

[harlan-zw]

Looks related to https://github.com/vueuse/head/issues/75

For the issue posted by @dpmango, my instinct is that this should be fairly easy to fix within @vueuse/head, the DOM hydration will just need to avoid aggressively removing nodes, however, I believe there were previous commits that "fixed" this issue. Can look at this soon.

@dpmango could you confirm which Nuxt RC version you're using just to rule out previous attempts to fix this issue in @vueuse/head.

The issue of switching pages without the intermediate state of having reset head data is something that will need some deeper thought

[harlan-zw]

In my case title jumps ABC -> default title -> ABC when simply refreshing the page without any navigation rc.10

/pages/foo/index.vue - setup()

useHead({
  title: 'ABC',
  meta: [...]
})

nuxt.config.js

  app: {
    head: {
      title: 'default title',
    }
}

Using without app.head or without app render ABC - empty - ABC title during load.

not sure whats affecting title, the the page I'm testing on calls useHead just once

Replication here: https://stackblitz.com/edit/nuxt-starter-bdn1o1?file=pages/index.vue

An obvious short-term solution would be not to define a root title. Investigating possible solutions around this otherwise

[harlan-zw]

Should be good to close, upstream is fixed and nuxt PR merged

[BenjaminOddou]

@harlan-zw @danielroe the problem still persists with RC-13. Please see my website.

Here is the repository

[danielroe]

It looks like you still have an older @vueuse/head dependency in your package lockfile, from nuxt-schema-org. Try updating your lockfile or removing that dependency.

But if you can reproduce on a fresh project, would you open a new issue with that reproduction instead?

[BenjaminOddou]

@danielroe I created issue #8786 with reproduction