\n\nNow if we take a look at https://ui.nuxt.com/components/dashboard-group, we can see the \"fixed\" class being set on the dashboard groups. If we remove the \"fixed\" class on the dashboard groups, the output is as expected:\n\n\u003Cimg width=\"545\" height=\"431\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7acaba3f-e80d-4ed6-9de9-472969b051cc\" />\n\nNow to my question: What does the \"fixed\" class do? Is it safe to remove? Should nesting DashboardGroups be possible by default?\n",[3139],{"name":3140,"color":3141},"question","d876e3",4680,"nuxt","ui","open","Visual Bug when nesting \"UDashboardGroup\" (is it save to remove the \"fixed\" class?)","2025-08-07T14:47:44Z","https://github.com/nuxt/ui/issues/4680",0.72851807,{"description":3151,"labels":3152,"number":3157,"owner":3143,"repository":3144,"state":3145,"title":3158,"updated_at":3159,"url":3160,"score":3161},"### Package\n\nv4.0.0-alpha.x\n\n### Description\n\nI get this `[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated.` when page transition is on and i use `UDashboardPanel` at the root of my page \n\nWould like to know if i am placing the panels wrongly or its a bug\n\n",[3153,3154],{"name":3140,"color":3141},{"name":3155,"color":3156},"v4","49DCB8",4952,"Navigation Issues on UDashboardPanel","2025-09-11T23:03:42Z","https://github.com/nuxt/ui/issues/4952",0.7665603,{"description":3163,"labels":3164,"number":3168,"owner":3143,"repository":3143,"state":3145,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v18.12.1\n- Nuxt Version: 3.12.4\n- CLI Version: 3.12.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: build, site, app, colorMode, compatibilityDate, devtools, modules, serverMiddleware, auth\n- Runtime Modules: @sidebase/nuxt-auth@0.8.1, @nuxt/ui@2.18.4, @nuxtjs/seo@2.0.0-rc.23 \n- Build Modules: -\n\n### Reproduction\n\nI am using a layout that is specifically for the login page of my app. This is because I want the page to take up the entire screen (remove the navbar etc.).\n\nAn issue im having is that the CSS that im using to remove the body margin and whatever is being carried back out of the login screen and into the rest of the app\n\nHere's the CSS in the layout:\n```css\n\u003Cstyle>\nbody, html {\n margin: 0;\n padding: 0;\n height: 100%;\n}\n.login-layout {\n height: 100%;\n min-height: 100%;\n}\n.app-wrapper {\n height: 100%;\n min-height: 100%;\n padding: 0px;\n min-width: 100%;\n}\n#__nuxt {\n height: 100%;\n min-height: 100%;\n}\n\u003C/style>\n```\n\n\n\n### Describe the bug\n\n`.app-wrapper` is applied to the body etc. so that when I go to the login screen it just applies those styles.\n\nWhen I go back to `/` for example, the `.app-wrapper` style is still applied to the page, and so the body loses its margin etc. that it had originally.\n\nHow can I fix this?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3165],{"name":3166,"color":3167},"pending triage","E99695",29296,"CSS being carried away from a layout into other pages that don't use that layout","2024-10-07T16:44:06Z","https://github.com/nuxt/nuxt/issues/29296",0.7825922,{"description":3174,"labels":3175,"number":3185,"owner":3143,"repository":3143,"state":3145,"title":3186,"updated_at":3187,"url":3188,"score":3189},"Linking here this repro from @Aareksio: https://stackblitz.com/edit/github-dbis9a.\r\n\r\n> You need pages with 2 different layouts, one must be nested page. And then you need to call `useAsyncData`. Which must be `{ immediate: false }`...\r\n\r\nhttps://github.com/nuxt/nuxt/issues/25214#issuecomment-1892758600_\r\n ",[3176,3179,3182],{"name":3177,"color":3178},"bug","d73a4a",{"name":3180,"color":3181},"🔨 p3-minor","FBCA04",{"name":3183,"color":3184},"suspense","C70109",25234,"Slot \"default\" invoked outside of the render function when navigating between layouts","2024-11-19T16:21:01Z","https://github.com/nuxt/nuxt/issues/25234",0.7903994,{"description":3191,"labels":3192,"number":3194,"owner":3143,"repository":3143,"state":3145,"title":3195,"updated_at":3196,"url":3197,"score":3198},"### Describe the feature\n\nI have a case where I need to execute some code after a Layout has changed and finished its transition but currently I'm unable to hook into the Layout changing.\n\nThings I've tried;\n- Adding the same `transition` prop to `\u003CNuxtLayout>` as is possible on `\u003CNuxtPage>`, but this isn't available.\n- Using the `hook` utility from `useNuxtApp` but this only allows hooking into page specific events again.\n- Watching the route change, but this doesn't account for the transition happening.\n- Wrapping the `\u003CNuxtLayout>` with a `\u003CTransition>` component and listen to the specific events on there.\n\nWould it be possible to implement a `layout:transition:finish` hook and/or supporting the `transition` prop on `\u003CNuxtLayout>` to allow for hooks like `onBeforeEnter`?\n\nIf this is already possible in a way please let me know as well 😄 \n\nThanks!\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).",[3193],{"name":3166,"color":3167},33129,"`\u003CNuxtLayout>` transition hooks and/or `layout:transition:finish` hook","2025-09-03T14:37:16Z","https://github.com/nuxt/nuxt/issues/33129",0.7906741,{"description":3200,"labels":3201,"number":3207,"owner":3143,"repository":3144,"state":3145,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Description\n\nWhen adding `UButton` component with `ghost` or `link` variant inside a `UBanner` with `links` attribute, they remain displayed in black text, even if the banner has a dark background (e.g., primary color). Unlike the Banner close button, which has specific Tailwind classes that adapt it to dark mode (white text), these elements do not automatically adjust their colors.\n\n\n\n```html\n \u003CUBanner to=\"/guide-gouvernance-associative-crise\" icon=\"i-ph-books-duotone\" title=\"Guide Gouvernance Associative\" :actions=\"[{label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'ghost', size: 'md', trailingIcon: 'i-ph-arrow-right'}, {label: 'Lire le guide', to: '/guide-gouvernance-associative-crise', variant: 'link', size: 'md'}]\" close />\n```\n\nWould it be relevant to add a global attribute to components like Button, Badge, etc., to force their appearance in dark (or light) mode, regardless of the global setting? This would ensure better visual consistency when these elements are placed on a colored background (e.g., `UPageCTA` with `solid` variant).\n\n### Additional context\n\n_No response_",[3202,3205],{"name":3203,"color":3204},"enhancement","a2eeef",{"name":3206,"color":3156},"v3",3307,"Better handling of `UButton`, `UBadge`, … colors on colored backgrounds","2025-08-25T13:20:01Z","https://github.com/nuxt/ui/issues/3307",0.7917498,{"description":3213,"labels":3214,"number":3217,"owner":3143,"repository":3144,"state":3218,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Description\n\nHi I have a mobile layout where I have a navbar stuck to the bottom of my screen which I want always visible. However when I use a UDrawer which comes out from the bottom it covers my navbar. I tried setting z-indexes in different places but it didn't seem to affect the UDrawer being overlayed on top of everything. \n\nWhich setting would be best to use to achieve this layout?",[3215,3216],{"name":3140,"color":3141},{"name":3206,"color":3156},4159,"closed","Can I set the z-index of UDrawer?","2025-06-02T20:25:58Z","https://github.com/nuxt/ui/issues/4159",0.7476177,{"description":3224,"labels":3225,"number":3229,"owner":3143,"repository":3143,"state":3218,"title":3230,"updated_at":3231,"url":3232,"score":3233},"Hey!\r\n\r\nWith our current project, me and the team was wondering what was the reasoning behind the decision to not support slots in layouts?\r\n\r\nWe ran into it when we realized that a CSS grid layout would work best for our responsive view, since each page knows what kind of sidebar or extra content is required in this specific case. For that the structure would need to be like this:\r\n\r\n```\r\nhtml\r\n head\r\n ...\r\n body\r\n my-header\r\n nuxt\r\n #content\r\n slot\r\n #sidebar\r\n slot(name=\"sidebar\")\r\n #extra\r\n slot(name=\"extra\")\r\n my-footer\r\n```\r\nRight now the two options we see are using a separate layout component or somehow coordinating sidebar and extra components to make their own requests according to current route, but both feel at odds with overall simplicity Nuxt aims for.\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c941\">#c941\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3226],{"name":3227,"color":3228},"2.x","d4c5f9",1079,"Why no slots in layouts?","2023-01-18T15:40:44Z","https://github.com/nuxt/nuxt/issues/1079",0.76536,{"description":3235,"labels":3236,"number":3240,"owner":3143,"repository":3143,"state":3218,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Discussed in https://github.com/nuxt/framework/discussions/5177\r\n\r\n\u003Cdiv type='discussions-op-text'>\r\n\r\n\u003Csup>Originally posted by **bloor** May 27, 2022\u003C/sup>\r\nI have my main layout (header, body[content] , footer)\r\nAnd then I`m trying to make a sub-layout for the account-user pages, that has a sidebar-menu\r\n\r\n\r\n```\r\nuser/account\r\nuser/settings\r\nuser/billing\r\netc\r\n```\r\n\r\nHow I implemented my nested Layout:\r\n\r\n\r\n\r\nThe issue I face is:\r\nWhenever I switch between a `default-layout path/page` .. to a `user-layout path/page` .. the whole page is re-rendered.\r\nThe SPA fluidity breaks for some reason. **I'm considering using a Component instead of the `user-layout`.**\r\n\r\nSo am I doing something wrong when doing nested layouts ?\r\nNuxt v3.0.0-rc.3 (latest)\r\n\r\nHere's the LIVE DEMO:\r\nhttps://d1map.netlify.app/\r\n```\r\ntest-user: antonebogdan@gmail.com\r\npass: asdasd123\r\n```\r\nWhen you commute between `features` , `platforms`, `about` everything is fluid, when you go to `account` it breaks.\u003C/div>",[3237],{"name":3238,"color":3239},"3.x","29bc7f",15461,"Nested Layouts ? like layout: (h, page) => h(Layout, () => child), ","2023-01-19T17:51:04Z","https://github.com/nuxt/nuxt/issues/15461",0.77139235,{"description":3246,"labels":3247,"number":3253,"owner":3143,"repository":3144,"state":3218,"title":3254,"updated_at":3255,"url":3256,"score":3257},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.17.4\nNitro Version: 2.11.12\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/unruffled-frog-pz7l74\n\n### Description\n\nHi,\nI'm experiencing an issue with the UDashboardSidebar component when using it in a right-to-left (RTL) layout. While resizing, the drag direction appears to be inverted—it moves in the opposite direction of the cursor.\n\nI've made an example project.\n\nCould you please look into this and let me know if there's a fix or workaround? I'm currently using Nuxt UI Pro in development.\n\nThanks a lot!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3248,3249,3250],{"name":3177,"color":3178},{"name":3206,"color":3156},{"name":3251,"color":3252},"nuxt/ui-pro","00dc82",4293,"UDashboardSidebar Resize Drag Direction Reversed in RTL theme","2025-07-02T11:44:08Z","https://github.com/nuxt/ui/issues/4293",0.774186,["Reactive",3259],{},["Set"],["ShallowReactive",3262],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fEXuvbaHgUX_0-wqrJF610ihxwDXvlowkzTSZUslGXpk":-1},"/nuxt/ui/4574"]