\n\n#### Console error:\n\n\u003Cimg width=\"1603\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/ee11c947-e89b-4824-9e65-17ed92dd0316\" />\n\n### Reproduction Demo\n\n[Nuxt3 - Teleport Bug Demo (StackBlitz)](https://stackblitz.com/edit/nuxt-teleport-demo?file=package.json)\n\n### Here is a video of the issue being reproduced:\nhttps://github.com/user-attachments/assets/75725d9f-f4f1-4d9c-8c8c-53f6b4cfdb4b\n\n### Additional context\n\n#### Root cause\n\nWith research I have found out what is causing the bug:\n\n\u003Cimg width=\"524\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3095510a-5d1a-443d-8f57-1a9653418d68\" />\n\n👉 **This issue only happens if we add `app.pageTransition` config.**\n\n\n#### Workaround\n\nA small workaround that I found is wrapping the `Teleport` component with `ClientOnly` – but I found that to be not ideal, as I would expect that this should also work for the ServerSide.\n\nDoes anyone know a solution for this?\n\n### Logs\n\n```shell-script\nruntime-core.esm-bun…er.js?v=b5c028d2:50 [Vue warn]: Unhandled error during execution of component update \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CDefault ref=Ref\u003C \nProxy(Object) {…}\n > > \n at \u003CAsyncComponentWrapper ref=Ref\u003C \nProxy(Object) {…}\n > > \n at \u003CLayoutLoader key=\"default\" layoutProps= \n{ref: RefImpl}\n name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= \n{ref: RefImpl}\n key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\nwarn$1\t@\truntime-core.esm-bun…er.js?v=b5c028d2:50\nlogError\t@\truntime-core.esm-bun…r.js?v=b5c028d2:261\nhandleError\t@\truntime-core.esm-bun…r.js?v=b5c028d2:253\ncallWithErrorHandling\t@\truntime-core.esm-bun…r.js?v=b5c028d2:199\nflushJobs\t@\truntime-core.esm-bun…r.js?v=b5c028d2:405\nPromise.then\t\t\nqueueFlush\t@\truntime-core.esm-bun…r.js?v=b5c028d2:319\nqueueJob\t@\truntime-core.esm-bun…r.js?v=b5c028d2:314\neffect2.scheduler\t@\truntime-core.esm-bun….js?v=b5c028d2:5472\ntrigger\t@\treactivity.esm-bundler.js?v=b5c028d2:226\nendBatch\t@\treactivity.esm-bundler.js?v=b5c028d2:284\nnotify\t@\treactivity.esm-bundler.js?v=b5c028d2:557\ntrigger\t@\treactivity.esm-bundler.js?v=b5c028d2:531\nset value\t@\treactivity.esm-bundl….js?v=b5c028d2:1403\nfinalizeNavigation\t@\tvue-router.mjs?v=b5c028d2:2499\n(anonymous)\t@\tvue-router.mjs?v=b5c028d2:2409\nPromise.then\t\t\npushWithRedirect\t@\tvue-router.mjs?v=b5c028d2:2377\npush\t@\tvue-router.mjs?v=b5c028d2:2303\nnavigate\t@\tvue-router.mjs?v=b5c028d2:1532\ncallWithErrorHandling\t@\truntime-core.esm-bun…r.js?v=b5c028d2:197\ncallWithAsyncErrorHandling\t@\truntime-core.esm-bun…r.js?v=b5c028d2:204\ninvoker\t@\truntime-dom.esm-bund…r.js?v=b5c028d2:720\n\n--------------------------------------------\n\nruntime-core.esm-bun….js?v=b5c028d2:5950 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')\n at unmountComponent (runtime-core.esm-bun…?v=b5c028d2:5950:18)\n at unmount (runtime-core.esm-bun…s?v=b5c028d2:5857:7)\n at patchSuspense (runtime-core.esm-bun…s?v=b5c028d2:6913:9)\n at Object.process (runtime-core.esm-bun…s?v=b5c028d2:6797:7)\n at patch (runtime-core.esm-bun…?v=b5c028d2:4747:16)\n at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bun…s?v=b5c028d2:5430:9)\n at ReactiveEffect.run (reactivity.esm-bundl…s?v=b5c028d2:198:19)\n at updateComponent (runtime-core.esm-bun…?v=b5c028d2:5282:18)\n at processComponent (runtime-core.esm-bun…s?v=b5c028d2:5217:7)\n at patch (runtime-core.esm-bun…?v=b5c028d2:4722:11)\nunmountComponent\t@\truntime-core.esm-bun….js?v=b5c028d2:5950\nunmount\t@\truntime-core.esm-bun….js?v=b5c028d2:5857\npatchSuspense\t@\truntime-core.esm-bun….js?v=b5c028d2:6913\nprocess\t@\truntime-core.esm-bun….js?v=b5c028d2:6797\npatch\t@\truntime-core.esm-bun….js?v=b5c028d2:4747\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=b5c028d2:5430\nrun\t@\treactivity.esm-bundler.js?v=b5c028d2:198\nupdateComponent\t@\truntime-core.esm-bun….js?v=b5c028d2:5282\nprocessComponent\t@\truntime-core.esm-bun….js?v=b5c028d2:5217\npatch\t@\truntime-core.esm-bun….js?v=b5c028d2:4722\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=b5c028d2:5430\nrun\t@\treactivity.esm-bundler.js?v=b5c028d2:198\nupdateComponent\t@\truntime-core.esm-bun….js?v=b5c028d2:5282\nprocessComponent\t@\truntime-core.esm-bun….js?v=b5c028d2:5217\npatch\t@\truntime-core.esm-bun….js?v=b5c028d2:4722\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=b5c028d2:5430\nrun\t@\treactivity.esm-bundler.js?v=b5c028d2:198\nrunIfDirty\t@\treactivity.esm-bundler.js?v=b5c028d2:236\ncallWithErrorHandling\t@\truntime-core.esm-bun…r.js?v=b5c028d2:197\nflushJobs\t@\truntime-core.esm-bun…r.js?v=b5c028d2:405\nPromise.then\t\t\nqueueFlush\t@\truntime-core.esm-bun…r.js?v=b5c028d2:319\nqueueJob\t@\truntime-core.esm-bun…r.js?v=b5c028d2:314\neffect2.scheduler\t@\truntime-core.esm-bun….js?v=b5c028d2:5472\ntrigger\t@\treactivity.esm-bundler.js?v=b5c028d2:226\nendBatch\t@\treactivity.esm-bundler.js?v=b5c028d2:284\nnotify\t@\treactivity.esm-bundler.js?v=b5c028d2:557\ntrigger\t@\treactivity.esm-bundler.js?v=b5c028d2:531\nset value\t@\treactivity.esm-bundl….js?v=b5c028d2:1403\nfinalizeNavigation\t@\tvue-router.mjs?v=b5c028d2:2499\n(anonymous)\t@\tvue-router.mjs?v=b5c028d2:2409\nPromise.then\t\t\npushWithRedirect\t@\tvue-router.mjs?v=b5c028d2:2377\npush\t@\tvue-router.mjs?v=b5c028d2:2303\nnavigate\t@\tvue-router.mjs?v=b5c028d2:1532\ncallWithErrorHandling\t@\truntime-core.esm-bun…r.js?v=b5c028d2:197\ncallWithAsyncErrorHandling\t@\truntime-core.esm-bun…r.js?v=b5c028d2:204\ninvoker\t@\truntime-dom.esm-bund…r.js?v=b5c028d2:720\n```",[3092],{"name":3046,"color":3047},30639,"App Routing breaks when navigating from a Page with Teleport","2025-02-03T11:19:24Z","https://github.com/nuxt/nuxt/issues/30639",0.65267533,{"description":3099,"labels":3100,"number":3109,"owner":3033,"repository":3033,"state":3049,"title":3110,"updated_at":3111,"url":3112,"score":3113},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-issues-25196\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CClientOnly>\r\n \u003CNuxtLayout>\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n \u003C/ClientOnly>\r\n\u003C/template>\r\n```\r\n\r\n### Describe the bug\r\n\r\nWhen using a `\u003CClientOnly>` component around the `App.vue` (only SSR the app shell), the NuxtLayout warning will appear even though the component is used.\r\n\r\n### Additional context\r\n\r\nRelated: https://github.com/nuxt/nuxt/issues/24912\r\n\r\n### Logs\r\n\r\n_No response_",[3101,3102,3105,3106],{"name":3043,"color":3044},{"name":3103,"color":3104},"dx","C39D69",{"name":3022,"color":3023},{"name":3107,"color":3108},"🍰 p2-nice-to-have","0E8A16",25196,"`\u003CNuxtLayout /> component has not been used.` Warning when using `\u003CClientOnly>` in `app.vue`","2024-02-09T20:33:36Z","https://github.com/nuxt/nuxt/issues/25196",0.65338326,{"labels":3115,"number":3118,"owner":3033,"repository":3033,"state":3049,"title":3119,"updated_at":3120,"url":3121,"score":3122},[3116,3117],{"name":3046,"color":3047},{"name":3071,"color":3072},6163,"Server side 'only' component shows error in development mode","2023-01-22T15:34:44Z","https://github.com/nuxt/nuxt/issues/6163",0.6621452,{"description":3124,"labels":3125,"number":3128,"owner":3033,"repository":3033,"state":3049,"title":3129,"updated_at":3130,"url":3131,"score":3132},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.1\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.5.1\r\n- Builder: -\r\n- User Config: devtools, app, routeRules, experimental, runtimeConfig, modules, build, alias, dir, piniaPersistedstate, gtag, vite\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.10.3, nuxt-icon@0.4.2, @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0, nuxt-gtag@1.1.2\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nRun the app using Nuxt version 3.9.0 and navigate to any route\r\n\r\nCheck it out the live version using 3.9.0\r\n[https://capacithor-git-nuxt-390-igortrinidad.vercel.app/](https://capacithor-git-nuxt-390-igortrinidad.vercel.app/)\n\n### Describe the bug\n\nThe page transitions and layout rendering broken after the update, for some reason the component SiteFooter appears above the layout \u003Cslot /> on any route client route change, but it renders properly on server side rendering (hard refresh)....\r\n\r\n\n\n### Additional context\n\n\r\n\r\nlayouts/default.vue\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"w-screen h-full min-h-[100vh]\">\r\n \u003CSiteHeader />\r\n \u003Cslot />\r\n \u003CSiteFooter />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n import SiteHeader from './site-components/SiteHeader.vue'\r\n import SiteFooter from './site-components/SiteFooter.vue'\r\n\u003C/script>\r\n```\n\n### Logs\n\n_No response_",[3126,3127],{"name":3043,"color":3044},{"name":3046,"color":3047},24944,"[3.9.0] Client rendering and page transitions broke after updating to the newest Nuxt version","2024-01-03T19:46:15Z","https://github.com/nuxt/nuxt/issues/24944",0.66273874,{"labels":3134,"number":3137,"owner":3033,"repository":3033,"state":3049,"title":3138,"updated_at":3139,"url":3140,"score":3141},[3135,3136],{"name":3043,"color":3044},{"name":3046,"color":3047},14253,"Import client component infinite loop","2023-01-19T17:31:10Z","https://github.com/nuxt/nuxt/issues/14253",0.6637452,["Reactive",3143],{},["Set"],["ShallowReactive",3146],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_7TSVZC1ckQTqhmwwTqsu6lYiT78DhnJxfP_HR9VZ-s":-1},"/nuxt/nuxt/23939"]