` in `app.vue`, like so:\n\n```\n\u003Ctemplate>\n \u003CNuxtPage\n :transition=\"{\n name: 'page',\n mode: 'out-in',\n }\"\n />\n\u003C/template>\n\n\u003Cstyle scoped>\n.page-enter-active,\n.page-leave-active {\n transition: opacity 200ms;\n opacity: 1;\n}\n.page-enter,\n.page-leave-active {\n opacity: 0;\n}\n\u003C/style>\n```\n\nAnd there is are no root component on pages, for example:\n\n```\n\u003Ctemplate>\n \u003Ch1>Index\u003C/h1>\n \u003Cp>This is the index page\u003C/p>\n \u003Cnuxt-link to=\"/about\">go to about\u003C/nuxt-link>\n\u003C/template>\n```\n\nThe page transition works only once, and if the transition is triggered again, then the page is just not rendered (try clicking the link in the broken replication more than once).\n\nBut if the page is wrapped in a single root component, like:\n\n```\n\u003Ctemplate>\n \u003Cdiv>\n \u003Ch1>About\u003C/h1>\n \u003Cp>This is the about page\u003C/p>\n \u003Cnuxt-link to=\"/\">go home\u003C/nuxt-link>\n \u003C/div>\n\u003C/template>\n```\n\nThen there is no issue.\n\nWe should probably inform the user about this behavior, display a warning or a error message or something. I spent the past 3 hours banging my head against a wall trying to find the root cause of this error.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2068],{"name":2069,"color":2070},"pending triage","E99695",30465,"Transition doesn't render page if root component missing","2025-01-12T18:28:29Z","https://github.com/nuxt/nuxt/issues/30465",0.7310142,{"description":2077,"labels":2078,"number":2081,"owner":1994,"repository":1994,"state":2023,"title":2082,"updated_at":2083,"url":2084,"score":2085},"Hi,\r\nas the release of `Vue 2.2` of `vue-server-renderer` adds the `context.head` and `context.style` functions, maybe drop this in favor for the use of `vue-meta`? Might make `NUXT` more lightweight and independent from external dependency.\r\nCheers!\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c270\">#c270\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2079,2080],{"name":2019,"color":2058},{"name":2032,"color":2033},318,"making use of vue-server-renderer contex.head and context.style function","2023-01-18T15:38:47Z","https://github.com/nuxt/nuxt/issues/318",0.73193264,{"description":2087,"labels":2088,"number":2097,"owner":1994,"repository":1994,"state":2023,"title":2098,"updated_at":2099,"url":2100,"score":2101},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.17.1\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: -\r\n- Package Manager: pnpm@8.15.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.4\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/tberk/nuxt-layout-bug\r\n\r\n### Describe the bug\r\n\r\nWhen using the useHead composable in Nuxt 3 to set bodyAttrs classes in different layouts, the classes set in one layout persist and are incorrectly applied to other layouts after navigation. This behavior leads to unintended styling issues across different parts of the application.\r\n\r\nAdmin Layout:\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nuseHead({\r\n htmlAttrs: { class: 'h-full admin-layout-html-class' },\r\n bodyAttrs: { class: 'h-full overflow-hidden admin-layout-body-class bg-gray-900 text-white' },\r\n})\r\n\u003C/script>\r\n```\r\n\r\nDefault Layout\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nuseHead({\r\n htmlAttrs: { class: 'h-full default-layout-html-class' },\r\n bodyAttrs: { class: 'h-full default-layout-body-class bg-gray-900 text-white' },\r\n})\r\n\u003C/script>\r\n```\r\n\r\n- Navigate from a page using the default layout to a page using the admin layout.\r\n- Then, navigate back to the page using the default layout.\r\n- The body and html retains the classes set by the admin layout's useHead, in addition to the classes defined in the default layout. This results in a mix of styles from both layouts being applied incorrectly.\r\n\r\nHTML: h-full default-layout-html-class admin-layout-html-class\r\nBODY: h-full default-layout-body-class bg-gray-900 text-white overflow-hidden admin-layout-body-class",[2089,2092,2093,2096],{"name":2090,"color":2091},"workaround available","11376d",{"name":1985,"color":1986},{"name":2094,"color":2095},"🔨 p3-minor","FBCA04",{"name":2048,"color":2049},25938,"useHead: Persistent Body & Html Classes Across Layouts After Navigation","2024-09-07T16:00:59Z","https://github.com/nuxt/nuxt/issues/25938",0.7331327,{"description":2103,"labels":2104,"number":2107,"owner":1994,"repository":1994,"state":2023,"title":2108,"updated_at":2109,"url":2110,"score":2111},"### What problem does this feature solve?\n\nReadability of output html is sacrificed, since even if you put simplest implementation in default layout file you will have extra div's created\n```\n\u003Ctemplate>\n \u003Cmain>\u003Cnuxt/>\u003C/main>\n\u003C/template>\n```\nwill result in\n```\n\u003Cbody data-n-head=\"\">\n \u003Cdiv id=\"__nuxt\">\n \u003Cdiv class=\"nuxt-progress\">\u003C/div>\n \u003Cdiv id=\"__layout\">\n \u003Cmain>\n \u003Cdiv data-v-1b011d9c=\"\">\n Hello!\n \u003C/div>\n \u003C/main>\n \u003C/div>\n \u003C/div>\n\u003C/div>\n```\nI want to be able to remove extra div's like id=\"__nuxt\" class=\"nuxt-progress\" id=\"__layout\" so that the output html is more readable to search engines and was easier to read.\n\n\n### What does the proposed changes look like?\n\nSince we already have possibility to override document, we should have more control on that like\n```\n\u003C!DOCTYPE html>\n\u003Chtml {{ HTML_ATTRS }}>\n \u003Chead>\n {{ HEAD }}\n \u003C/head>\n \u003Cbody {{ BODY_ATTRS }}>\n {{ APP }}\n \u003C/body>\n\u003C/html>\n```\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c7645\">#c7645\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2105,2106],{"name":2019,"color":2058},{"name":2032,"color":2033},3811,"Allow possibility to change/remove div id=__layout and div id=__nuxt","2023-01-22T15:50:41Z","https://github.com/nuxt/nuxt/issues/3811",0.73451054,["Reactive",2113],{},["Set"],["ShallowReactive",2116],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"1LjA-GwFVo7-5wLe3tLLfGeLqQqZNw-6yJ1-dtcPJt0":-1},"/nuxt/ui/2686"]