UApp with layoutTransition causes multiple app renders after an error is triggered. #5203
Description
Environment
Operating System: Linux
Node Version: v20.12.1
Nuxt Version: 4.1.2
CLI Version: 3.28.0
Nitro Version: 2.12.6
Package Manager: pnpm@8.15.6
Builder: -
User Config: compatibilityDate, devtools, modules, app
Runtime Modules: @nuxt/ui@4.0.0
Build Modules: -
Is this bug related to Nuxt or Vue?
Nuxt
Package
v4.x
Version
4.0.1
Reproduction
https://codesandbox.io/p/devbox/quirky-lehmann-tmq92n?workspaceId=ws_Q5C3Bq2RRtqpENUnM12LKF
Description
In my application, after logging in (Layout: 'auth'), the user is redirected to the homepage (Layout: 'default'). Then, several requests are triggered, and one of the endpoints returned a 500 error. I have global error handling for status code 500, and in the middleware for this error I use showError({ statusCode: 500 }). In this case, both the homepage and error.vue were rendered.
When I disabled LayoutTransition or remove all UApp occurrences the problem did not occur. I'm using styles from:
https://nuxt.com/docs/4.x/getting-started/transitions#dynamic-transitions
I tried using UApp only inside App.vue and also inside Error.vue like here:
https://github.com/nuxt-ui-templates/dashboard/blob/main/app/error.vue
Additional context
https://github.com/user-attachments/assets/b73f7e1a-fbf5-42cb-b052-52d226db8992
https://github.com/user-attachments/assets/2be2e715-1af4-4275-81fa-c4e4907966e2
Base issue: nuxt/nuxt#33367