Title breaking during page transitions
See original GitHub issueEnvironment
- 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
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:
- Created a year ago
- Reactions:2
- Comments:13 (3 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@danielroe I created issue #8786 with reproduction
It looks like you still have an older
@vueuse/head
dependency in your package lockfile, fromnuxt-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?