question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Title breaking during page transitions

See original GitHub issue

Environment


  • Operating System: Darwin
  • Node Version: v16.16.0
  • Nuxt Version: 3.0.0-rc.6
  • Package Manager: npm@8.11.0
  • Builder: vite
  • User Config: modules, buildModules, schemaOrg, image, colorMode, css, pwa, vite
  • Runtime Modules: @nuxtjs/tailwindcss@5.3.0, @kevinmarrec/nuxt-pwa@0.4.2, @nuxt/image-edge@1.0.0-27628766.3629b9a, @nuxtjs/color-mode@3.1.4, @pinia/nuxt@0.3.0, nuxt-schema-org@0.7.0-beta.3
  • Build Modules: @nuxt-modules/compression@0.1.0

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)

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:2
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
BenjaminOddoucommented, Nov 7, 2022

@danielroe I created issue #8786 with reproduction

2reactions
danielroecommented, Nov 7, 2022

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?

Read more comments on GitHub >

github_iconTop Results From Across the Web

19+ Amazing CSS Page Transitions ( With Beautiful Examples! )
Here's a collection with some great CSS Page Transitions and animations to use in your websites. We added CodePen examples so you can...
Read more >
page-break - Properties - CSS-Tricks
This code snippet does 3 things: it forces a page-break before all h2 headings (perhaps h2 tags in your document are chapter titles...
Read more >
Smooth and simple transitions with the View Transitions API
The View Transition API makes it easy to change the DOM in a single step, while creating an animated transition between the two...
Read more >
How to Add Animation Effects to Page Break Transitions
This snippet will only run on the form ID 406, when the Next or Previous page button is clicked, the script will add...
Read more >
Smooth Page Transitions With Javascript Tutorial - YouTube
Check out my courses here! https://developedbyed.com #pagetransitions #web development #javascript Today we are going to build out a website ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found