` component, specifically with the `v-model:open` binding:\n\n* `v-model:collapsed` works great — it properly handles the collapsed/expanded state.\n* But `v-model:open` doesn't seem to behave as expected. When I bind it to a custom `open` state and try to set it to `false` (e.g., using a custom button), the sidebar doesn’t actually close. Then, as soon as I click anywhere else on the page, the `open` value is automatically reset to `true`.\n\nIt feels like something internal is re-opening the sidebar and overriding the bound value.\n\nOther small notes:\n\n* `\u003CUDashboardSidebarToggle />` is hidden on desktop due to `lg:hidden`, which makes sense for mobile setups. But even when made visible, it doesn’t allow fully toggling the sidebar on desktop — the sidebar remains fixed.\n* I also tried changing the `default-size` prop (e.g., to `16rem` / `256px`), and it didn’t apply immediately. It only worked after clearing the site data. I’m guessing this is due to cookies storing the previous value? Maybe it could be possible to sync the cookie automatically when `default-size` changes?\n\nHere’s a minimal reproduction of the issue: [Here](https://codesandbox.io/p/devbox/polished-cookies-lrv5hm?file=%2Fapp%2Fpages%2Findex.vue%3A9%2C23)\n\nLastly, I was wondering if in the future it might be possible to support a prop like `expand-on-hover`, where a collapsed sidebar could temporarily expand on mouse hover — without pushing the rest of the layout. This could allow building more advanced layouts similar to what Supabase uses: a primary sidebar that stays collapsed when a secondary one is open, but can still expand on hover without shifting the content.\n\nThanks again for your amazing work and for considering these ideas! 😊\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3191,3192,3194],{"name":3172,"color":3173},{"name":3193,"color":3179},"v3",{"name":3175,"color":3176},4599,"DashboardSidebar: v-model:open not working as expected","2025-07-25T16:31:55Z","https://github.com/nuxt/ui/issues/4599",0.7400647,{"description":3201,"labels":3202,"number":3207,"owner":3181,"repository":3182,"state":3183,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Description\n\nHi 👋 First of all, thank you for your awesome library — it's been a pleasure to use so far!\n\nI'm trying to use a UBanner in a layout based on UDashboardGroup, which itself contains a UDashboardSidebar and a UDashboardPanel with a UDashboardNavbar.\n\nThe issue I'm running into is that the UBanner floats above the layout instead of pushing the UDashboardGroup down. Its height isn't accounted for, so it overlaps with the rest of the layout.\n\nIs there a recommended way to make the layout adapt to the presence of a UBanner, so it pushes the dashboard content accordingly?\n\nThanks again for your great work!",[3203,3206],{"name":3204,"color":3205},"question","d876e3",{"name":3193,"color":3179},4574,"How to use a UBanner with a layout based on UDashboardGroup?","2025-07-22T17:43:36Z","https://github.com/nuxt/ui/issues/4574",0.74101126,{"description":3213,"labels":3214,"number":3218,"owner":3181,"repository":3182,"state":3183,"title":3219,"updated_at":3220,"url":3221,"score":3222},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: npm@11.5.1\n- Builder: -\n- User Config: devServer, runtimeConfig, experimental, devtools, ssr, components, modules, imports, shiki, css, ui, icon, compatibilityDate\n- Runtime Modules: @pinia/nuxt@0.11.2, @nuxt/ui@3.2.0, @nuxt/image@1.10.0, @vueuse/nuxt@13.5.0, nuxt-shiki@0.3.1, @nuxt/icon@1.15.0, @nuxtjs/color-mode@3.5.2, @compodium/nuxt@0.1.0-beta.11\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.7\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/dropdown-menu (call any menu DropdownMenu from example)\nhttps://ui.nuxt.com/components/context-menu (call any menu ContexMenu from example)\n\n### Description\n\nWhen I call any UDropdownMenu or UContextMenu in my project, it causes the elements in the entire page template to shift and also removes the scrollbar from the page, which also causes the content to shift. This can also be checked on the documentation page. I made a screen recording.\n\nHere you can see how the icon in the left menu moves to select UI Pro, as well as scrolling this menu. And the main page scroll disappears.\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3215,3216,3217],{"name":3172,"color":3173},{"name":3193,"color":3179},{"name":3175,"color":3176},4619,"UDropdownMenu, UContextMenu move elements on the page and remove page scroll","2025-07-28T15:39:43Z","https://github.com/nuxt/ui/issues/4619",0.7643107,{"description":3224,"labels":3225,"number":3232,"owner":3181,"repository":3181,"state":3233,"title":3234,"updated_at":3235,"url":3236,"score":3237},"I have a use case where I'm building a mobile-like UI. One of my Nuxt pages is supposed to slide up over the current content (akin to a panel) when navigated to, and slide down when navigating away. I set the transition mode to \"in-out\" so the current view does not transition out until the pane has slid up fully, but when navigating away from the pane, there's no animation at all.\r\n\r\nI have something like so for the CSS:\r\n\r\n```css\r\n.panel {\r\n width: 100vw;\r\n height: 100vh;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n}\r\n.panel-enter-active {\r\n animation: slideUp 350ms cubic-bezier(0.42, 0, 0.58, 1) forwards;\r\n}\r\n.panel-leave-active {\r\n animation: slideDown 350ms cubic-bezier(0.42, 0, 0.58, 1) forwards;\r\n}\r\n\r\n@keyframes slideUp {\r\n 0% {\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n 100% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n}\r\n@keyframes slideDown {\r\n 0% {\r\n transform: translate3d(0, 0, 0);\r\n }\r\n 100% {\r\n transform: translate3d(0, 100%, 0);\r\n }\r\n}\r\n```\r\n\r\nThis is even the case if I set the other pages transition to in-out, there still isn't any kind of transition. I can't think of any other way to have a panel (as a page) slide up and down _over_ another page.\r\n\r\n**Edit:** Repo demonstrating the issue — https://bitbucket.org/syropian/nuxt-transition-bug\r\n\r\nTo reproduce go from the panel page to the home page or \"other\" page to the home page, and notice how they don't animate out. \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/c2359\">#c2359\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3226,3229],{"name":3227,"color":3228},"pending triage","E99695",{"name":3230,"color":3231},"2.x","d4c5f9",2715,"closed","\"in-out\" transition modes can never animate out?","2023-01-22T15:30:04Z","https://github.com/nuxt/nuxt/issues/2715",0.73527026,{"description":3239,"labels":3240,"number":3242,"owner":3181,"repository":3181,"state":3233,"title":3243,"updated_at":3244,"url":3245,"score":3246},"Hi, \r\n\r\nI am trying to use transition effect along with custom layout. Looks like transition does not work if layout is not default. Reproducer: [link](https://glitch.com/edit/#!/nuxt-layout-transitions) \r\nIs this expected? If yes, how can I have transition on page that uses custom layout?\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/c1382\">#c1382\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3241],{"name":3230,"color":3231},1549,"Transition doesn't work if using layout other then default","2023-01-18T15:41:58Z","https://github.com/nuxt/nuxt/issues/1549",0.74367064,{"description":3248,"labels":3249,"number":3253,"owner":3181,"repository":3182,"state":3233,"title":3254,"updated_at":3255,"url":3256,"score":3257},"### 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",[3250,3251,3252],{"name":3204,"color":3205},{"name":3175,"color":3176},{"name":3178,"color":3179},4952,"Navigation Issues on UDashboardPanel","2025-09-14T12:24:33Z","https://github.com/nuxt/ui/issues/4952",0.74869734,{"description":3259,"labels":3260,"number":3263,"owner":3181,"repository":3182,"state":3233,"title":3264,"updated_at":3265,"url":3266,"score":3267},"### Description\n\nReading the docs I'm assuming to change the width of the slideover is done with UI prop and setting wrapper?\n\n` \u003CUSlideover :ui=\"{\n wrapper: 'classWithWidth'\n }\"`\n\nI tried \n`\u003Cstyle lang=\"scss\">\n.classWithWidth {\n border: solid red 10px!important;\n}\n\u003C/style>`\n\nand doesn't render at all, any tips?",[3261,3262],{"name":3204,"color":3205},{"name":3193,"color":3179},4751,"USlideover UI prop","2025-08-14T23:33:28Z","https://github.com/nuxt/ui/issues/4751",0.75530964,{"description":3269,"labels":3270,"number":3276,"owner":3181,"repository":3182,"state":3233,"title":3277,"updated_at":3278,"url":3279,"score":3280},"### 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```",[3271,3272,3273],{"name":3172,"color":3173},{"name":3193,"color":3179},{"name":3274,"color":3275},"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.7557445,{"description":3282,"labels":3283,"number":3287,"owner":3181,"repository":3182,"state":3233,"title":3288,"updated_at":3289,"url":3290,"score":3291},"### Environment\n\n- Nuxt version: `v.3.2.0`\n- Vue version: `v3.5.17`\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/thirsty-snow-722czt?file=%2Fsrc%2FApp.vue&workspaceId=ws_An7GtePWxuFz84S5Ko1Dey\n\n### Description\n\n## Vue 3 + NuxtUI Pro: Components Not Working After Page Reload\n\nHello,\n\nI am using Vue 3 together with NuxtUI Pro during development. I have been trying to solve this issue for 2 days but unfortunately, I still haven’t found a solution.\n\n**Problem Summary:** \nWhen I modify the code on the page, everything works correctly with *hot module replacement* (HMR). However, when I fully reload the page (`F5`), the components do not render or work as expected.\n\nHere is the relevant template code:\n\n```vue\n\u003Ctemplate>\n \u003CUApp>\n \u003CUDashboardGroup>\n \u003CUDashboardSidebar \n collapsible\n resizable \n >\n \u003C/UDashboardSidebar>\n \n \u003CUDashboardPanel>\n \n \u003Ctemplate #header>\n \u003CUDashboardNavbar title=\"RİDES\" icon=\"i-lucide-house\">\n \u003Ctemplate #leading>\n \u003CUDashboardSidebarCollapse variant=\"subtle\" />\n \u003C/template>\n \u003C/UDashboardNavbar>\n \u003C/template>\n \n \u003Ctemplate #body>\n \u003CRouterView />\n \u003C/template>\n \n \u003C/UDashboardPanel>\n \u003C/UDashboardGroup>\n \u003C/UApp>\n\u003C/template>",[3284,3285,3286],{"name":3172,"color":3173},{"name":3193,"color":3179},{"name":3175,"color":3176},4487,"Sidebar not collapsed after page reload [with Vite + Vue3 + Nuxtui Pro Development mode]","2025-07-08T12:17:31Z","https://github.com/nuxt/ui/issues/4487",0.75756854,["Reactive",3293],{},["Set"],["ShallowReactive",3296],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1FqQQRdjESx6zdHCxMfcFhlAoZ6muSjpXo4LPK4b134":-1},"/nuxt/ui/5208"]