\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n\u003CFooter />\r\n```\r\nWhen we use 'out-in' mode in pageTransition in nuxt.config.ts:\r\n```\r\npageTransition: { name: 'page', mode: 'out-in' }\r\n```\r\nAnd we **CLICK ON THE LINK** . This is what's rendered in the DOM.\r\n```\r\n\u003CHeader />\r\n\u003CFooter />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n```\r\nAlso when we use the following layout:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n \u003Cp>More Content\u003C/p>\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nThis is the result in the DOM, after the link is clicked:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cp>More Content\u003C/p>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nNuxt v3 it seems that append the slot at the end of the parent element. Which seems a bug to me. Looks like there needs to be a handling in appending the slot in the correct order.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3197,3198],{"name":3171,"color":3172},{"name":3187,"color":3188},25739,"Slot position gets shifted when using the out-in page transition","2024-02-11T09:36:25Z","https://github.com/nuxt/nuxt/issues/25739",0.7380373,{"description":3205,"labels":3206,"number":3208,"owner":3147,"repository":3147,"state":3177,"title":3209,"updated_at":3210,"url":3211,"score":3212},"### Environment\r\n\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: @nuxt/content@2.13.0\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-mzb2e5\r\n\r\nOpen the console and click on the \"Link\".\r\n\r\n### Describe the bug\r\n\r\nIf you create a composable with `useLazyAsyncData` and then call it inside `ClientOnly` component it will log the below warning when you want to navigate between pages:\r\n\r\n```\r\nchunk-2XHGWBZJ.js?v=008d553a:1512 [Vue warn]: Slot \"default\" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead. \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CDefault ref=Ref\u003C Proxy(Object)聽{鈥 > > \r\n at \u003CLayoutLoader key=\"default\" layoutProps= {ref: RefImpl} name=\"default\" > \r\n at \u003CNuxtLayoutProvider layoutProps= {ref: RefImpl} key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n\r\n### Additional context\r\n\r\nUsing `useLazyAsyncData` directly inside the component is Okay and works without problem.\r\n\r\n### Logs\r\n\r\n_No response_",[3207],{"name":3171,"color":3172},27752,"Slot \"default\" invoked outside of the render function when using a composable (contains useLazyAsyncData) inside ClientOnly component","2024-06-24T10:03:48Z","https://github.com/nuxt/nuxt/issues/27752",0.7392436,{"description":3214,"labels":3215,"number":3221,"owner":3147,"repository":3147,"state":3177,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Environment\n\nNuxi 3.0.0-rc.10 \r\nRootDir: /sandbox\r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v14.19.3`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://codesandbox.io/s/dawn-morning-b454k7?file=/pages/index.vue\r\n\r\nJuicy bit:\r\n`\u003CFooComponent>\r\n \u003Ctemplate v-if=\"true\" #first> Hello conditional \u003C/template>\r\n\u003C/FooComponent>`\n\n### Describe the bug\n\n- When rendering a component slot with a condition that evaluates to true, an error will be thrown, the slot is however rendered correctly.\r\n- It only seems to happen during SSR.\r\n- Conditions that evaluates to false does not throw an error\n\n### Additional context\n\nIn RC 8 this was working fine\n\n### Logs\n\n```shell\n[nitro] [dev] [unhandledRejection] TypeError: Cannot set property 'key' of undefined\r\n at slots.\u003Ccomputed> (/sandbox/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:2924:29)\r\n at ssrRenderSlotInner (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:628:21)\r\n at Module.ssrRenderSlot (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:618:5)\r\n at _sfc_ssrRender (/sandbox/components/FooComponent.vue:7:25)\r\n at renderComponentSubTree (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:254:17)\r\n at renderComponentVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)\r\n at Module.ssrRenderComponent (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:612:12)\r\n at _sfc_ssrRender (/sandbox/pages/index.vue:60:31)\r\n at renderComponentSubTree (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:254:17)\r\n at renderComponentVNode (/sandbox/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)\n```\n",[3216,3217,3220],{"name":3171,"color":3172},{"name":3218,"color":3219},"upstream","E8A36D",{"name":3174,"color":3175},14950,"Server-side rendering a component with conditional slot causes error","2024-06-17T15:31:28Z","https://github.com/nuxt/nuxt/issues/14950",0.7407523,{"description":3227,"labels":3228,"number":3236,"owner":3147,"repository":3147,"state":3177,"title":3237,"updated_at":3238,"url":3239,"score":3240},"Initially I declared my default layout using `\u003Cslot>` for router-views because that's what was [recommended in the documentation](https://nuxt.com/docs/guide/directory-structure/layouts#default-layout). This worked but I noticed that the error page does not get the layout. Even [this](https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis) and this:\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\n// You might choose this based on an API call or logged-in status\r\nconst layout = \"default\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CNuxtLayout :name=\"layout\">\r\n \u003CNuxtPage />\r\n \u003C/NuxtLayout>\r\n\u003C/template>\r\n```\r\ndid not change the problem that the error page didn't get the layout. This is the first bug in my opinion. So I did a workaround:\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { NuxtError } from '#app'\r\nimport DefaultLayout from \"/layouts/default.vue\"\r\nconst props = defineProps({\r\n error: Object as () => NuxtError\r\n})\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CDefaultLayout>\r\n \u003Cdiv>\r\n \u003Ch1>{{ \"Error \" + error?.statusCode }}\u003C/h1>\r\n \u003Cpre>{{ JSON.stringify(error, null, 4) }}\u003C/pre>\r\n \u003CNuxtLink to=\"/\">Go back home\u003C/NuxtLink>\r\n \u003C/div>\r\n \u003C/DefaultLayout>\r\n\u003C/template>\r\n```\r\nThis was ugly but worked however eventually I noticed another problem. I tried passing props from layout to page components and that wasn't working (second bug). So I fixed (?) the problem by replacing `\u003Cslot>` on the layout with `\u003CNuxtPage />`. This again worked but I faced another problem: Now the error page content (other than layout) isn't visible. So now the \"best\" choice I know I have is to have an error page without a layout, but that's not what I want. Do you confirm my bug reports? What should I do? Thanks.",[3229,3230,3231,3233],{"name":3171,"color":3172},{"name":3187,"color":3188},{"name":3232,"color":3142},"needs reproduction",{"name":3234,"color":3235},"closed-by-bot","ededed",25982,"Layout issues (error page, slot/NuxtPage props)","2024-12-21T23:06:42Z","https://github.com/nuxt/nuxt/issues/25982",0.74405086,{"description":3242,"labels":3243,"number":3247,"owner":3147,"repository":3147,"state":3177,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.15.0\r\n- Nuxt Version: 3.6.1\r\n- Nitro Version: 2.5.2\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: vite\r\n- User Config: extends, telemetry, ssr, nitro, fontMetrics, routeRules, runtimeConfig, build, modules, components, bugsnag, devtools, i18n, app, dnGraphqlClient, vite, plugins\r\n- Runtime Modules: @nuxtjs/fontaine@0.4.0, @pinia/nuxt@0.4.11, @nuxt/devtools@0.6.6, nuxt-bugsnag@5.9.2, @digitalnatives/css-variables/nuxt@5.1.0, @digitalnatives/graphql-client@3.2.2, @nuxtjs/i18n@8.0.0-beta.12\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nSetting up a component inheritance pattern:\r\n\r\n- With ssr: true...\r\n- Base component with a root-level `\u003Ccomponent>` element and one or more slots\r\n- An extending component which \"inherits\" the slots of the base component using `$slots` in the template;\r\n- Use the extending component somewhere\r\n- On the server, an error is thrown: `[1:54:29 PM] [Vue warn]: Property \"name\" was accessed during render but is not defined on instance.`\r\n- On the client, a hydration error is thrown: SSR renders no content within the slots, client-side the component is rendered correctly however\r\n\r\nSee https://codesandbox.io/p/github/nuxt/starter/csb-rhhp8s/draft/determined-joliot?file=/app.vue:3,69\r\n\r\n### Describe the bug\r\n\r\nIt seems server-side there is some problem with SSR trying to pass slots to a dynamic `\u003Ccomponent>`\r\n\r\nI would expect this pattern to work, but somehow the slot name is getting lost somewhere\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Ccomponent\r\n :is=\"element\"\r\n >\r\n \u003Cslot />\r\n \u003C/component>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n'use strict';\r\n\r\nexport default {\r\n props: {\r\n element: {\r\n type: String,\r\n required: false,\r\n default: 'button'\r\n }\r\n }\r\n};\r\n\u003C/script>\r\n```\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CBaseComponent>\r\n \u003Ctemplate v-for=\"(_, name) in $slots\" v-slot:[name]=\"scope\">\r\n \u003Cslot :name=\"name\" v-bind=\"scope\" />\r\n \u003C/template>\r\n \u003C/BaseComponent>\r\n\u003C/template>\r\n\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3244,3245,3246],{"name":3171,"color":3172},{"name":3187,"color":3188},{"name":3218,"color":3219},21915,"Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.74565357,{"description":3253,"labels":3254,"number":3257,"owner":3147,"repository":3147,"state":3177,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### Environment\n\nNuxt 3.0.0-rc.11\n\n### Reproduction\n\nStackBlitz: https://stackblitz.com/edit/nuxt3-layout-slot-bug\n\n### Describe the bug\n\nLayout slots not working with default layout, generate error (see reproduction):\r\n\r\n```\r\nError: Codegen node is missing for element/if/for node. Apply appropriate transforms first.\r\n```\r\n\r\nNote the use of `app.vue`.\r\n\r\nExplicitly using `\u003CNuxtLayout>` with `layout: false` in page meta works but leads to full re-render of the layout and kinda defies the purpose of a default layout.\r\n\r\nNot sure if I'm doing something wrong with the setup, but following the docs, the code in the repro should work. Also, best in terms of DX IMO.\n\n### Additional context\n\nThis is a typical use case where you for instance have a nav and want to add additional items via a slot on specific pages.\n\n### Logs\n\n_No response_",[3255,3256],{"name":3171,"color":3172},{"name":3187,"color":3188},15158,"Layout slots not working in default layout","2023-09-26T14:37:01Z","https://github.com/nuxt/nuxt/issues/15158",0.7470582,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fazvGGlLU1ph1u-9nOfThdQWKRdZl-eZDY9VwqeGd_RE":-1},"/nuxt/ui/3324"]