\n```\n\nI had to search hard to find my own answer, and I think it's a very important case for everyone. It will benefit us all.\nThank you in advance!",[],4409,"ui","USelect > document how to make items/options content width, fit the longest item/option width. Add an image example.","2025-06-27T10:46:18Z","https://github.com/nuxt/ui/issues/4409",0.7486974,{"description":2930,"labels":2931,"number":2938,"owner":2914,"repository":2914,"state":2915,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Describe the feature\n\nBased on [this discussion](https://github.com/nuxt/nuxt/discussions/19896), I suggest to implement a global variables feature.\r\n\r\nExample:\r\n\r\n`app.config.ts`\r\n```\r\nexport default defineAppConfig({\r\n appName: 'My Nuxt App'\r\n})\r\n```\r\n\r\n`pages/index.vue`\r\n```\r\n\u003Ctemplate>\r\n\u003Ch1>{{ appConfig.appName }}\u003C/h1>\r\n\u003C/template>\r\n```\r\n\r\nWithout explicit declare: `const appConfig = useAppConfig()` on every component.\r\n\r\n\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2932,2935],{"name":2933,"color":2934},"enhancement","8DEF37",{"name":2936,"color":2937},"discussion","538de2",20098,"Global variables template shortcut","2024-06-30T11:09:06Z","https://github.com/nuxt/nuxt/issues/20098",0.76081747,{"description":2944,"labels":2945,"number":2952,"owner":2914,"repository":2914,"state":2953,"title":2954,"updated_at":2955,"url":2956,"score":2957},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: npm@10.2.4\r\n- Builder: -\r\n- User Config: app, devtools, ssr, modules, tailwindcss, ui, features, experimental\r\n- Runtime Modules: @nuxt/ui@2.15.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-7pdnsh?file=nuxt.config.ts\r\n\r\n\r\n\r\nhttps://github.com/nuxt/nuxt/assets/2706508/fb8dbc72-4936-4eba-89c8-4d6b9dcda192\r\n\r\n\n\n### Describe the bug\n\ntitle from defineNuxtConfig is not substituted into titleTemplate as default value if the page does not have its own title defined\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2946,2949],{"name":2947,"color":2948},"3.x","29bc7f",{"name":2950,"color":2951},"upstream-bug","B60205",26550,"closed","title from defineNuxtConfig is not substituted into titleTemplate as default value if the page does not have its own title defined","2024-04-01T13:03:01Z","https://github.com/nuxt/nuxt/issues/26550",0.72626895,{"description":2959,"labels":2960,"number":2965,"owner":2914,"repository":2914,"state":2953,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Describe the feature\n\nOnly home is a different layout, all the internals of the site are the same, so I would like to use: \u003CNuxtLayout name=\"home\"> for initial, but in the internals I would like to use the default layout.\r\n\r\nBut it doesn't work:\r\n\r\n```\r\n\u003Ctemplate #preContent>\r\n \u003Cdiv class=\"sum-class\">\r\n SomeContent here\r\n \u003C/div>\r\n \u003C/template>\r\n```\r\n\r\nIf this functionality already exists, I haven't found it in the documentation.\r\n```\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v18.13.0`\r\n- Nuxt Version: `3.3.1`\r\n- Nitro Version: `2.3.1`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `directus`, `modules`, `app`, `imports`\r\n- Runtime Modules: `@nuxtjs/tailwindcss@6.6.3`, `nuxt-icon@0.3.3`, `nuxt-directus@5.1.1`, `@pinia/nuxt@0.4.7`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n```\r\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2961,2962],{"name":2947,"color":2948},{"name":2963,"color":2964},"pending triage","E99695",19859,"Use the named slot templates with default layout","2023-03-22T15:39:14Z","https://github.com/nuxt/nuxt/issues/19859",0.7267493,{"description":2971,"labels":2972,"number":2975,"owner":2914,"repository":2914,"state":2953,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, ssr, app, css\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-njpvcp\n\n### Describe the bug\n\nThe following is a very common application layout(also shown in layouts/default.vue in the reproduction link):\r\n```\r\n\u003CHeader />\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_",[2973,2974],{"name":2947,"color":2948},{"name":2963,"color":2964},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":2981,"labels":2982,"number":2984,"owner":2914,"repository":2914,"state":2953,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### 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_",[2983],{"name":2947,"color":2948},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":2990,"labels":2991,"number":2997,"owner":2914,"repository":2914,"state":2953,"title":2998,"updated_at":2999,"url":3000,"score":3001},"### 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",[2992,2993,2996],{"name":2947,"color":2948},{"name":2994,"color":2995},"upstream","E8A36D",{"name":2950,"color":2951},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":3003,"labels":3004,"number":3012,"owner":2914,"repository":2914,"state":2953,"title":3013,"updated_at":3014,"url":3015,"score":3016},"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.",[3005,3006,3007,3009],{"name":2947,"color":2948},{"name":2963,"color":2964},{"name":3008,"color":2909},"needs reproduction",{"name":3010,"color":3011},"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.7440508,{"description":3018,"labels":3019,"number":3023,"owner":2914,"repository":2914,"state":2953,"title":3024,"updated_at":3025,"url":3026,"score":3027},"### 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_",[3020,3021,3022],{"name":2947,"color":2948},{"name":2963,"color":2964},{"name":2994,"color":2995},21915,"Hydration error for slot \"inheritance\" on dynamic components","2023-07-25T06:43:06Z","https://github.com/nuxt/nuxt/issues/21915",0.74565357,["Reactive",3029],{},["Set"],["ShallowReactive",3032],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fazvGGlLU1ph1u-9nOfThdQWKRdZl-eZDY9VwqeGd_RE":-1},"/nuxt/ui/3324"]