` 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```",[3137,3140,3143],{"name":3138,"color":3139},"bug","d73a4a",{"name":3141,"color":3142},"v3","49DCB8",{"name":3144,"color":3145},"triage","ffffff",4599,"nuxt","ui","open","DashboardSidebar: v-model:open not working as expected","2025-07-25T16:31:55Z","https://github.com/nuxt/ui/issues/4599",0.7145271,{"description":3155,"labels":3156,"number":3160,"owner":3147,"repository":3148,"state":3149,"title":3161,"updated_at":3162,"url":3163,"score":3164},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://github.com/nuxt-ui-pro/dashboard\nhttps://dashboard-template.nuxt.dev/\n\n### Description\n\nI'm getting the following warning in the console: `Added non-passive event listener to a scroll-blocking 'touchstart' event.`\n\nI'm using a few heavily altered components from the Nuxt UI Pro Dashboard template. I thought it was something I did and started on a reproduction, but you can see the same warning pop up in the template itself, no reproduction needed: https://dashboard-template.nuxt.dev/\n\nI think I have narrowed it down to the `DashboardSideBar`. Removing that component in my project also removes the warning.\n\nI've had no luck trying to fix it, but it might be similar to this bug that was fixed long ago: https://github.com/nuxt/ui/issues/1512\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3157,3158,3159],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4580,"DashboardSideBar: Added non-passive event listener to a scroll-blocking 'touchstart' event.","2025-07-23T16:15:53Z","https://github.com/nuxt/ui/issues/4580",0.7306252,{"description":3166,"labels":3167,"number":3176,"owner":3147,"repository":3148,"state":3177,"title":3178,"updated_at":3179,"url":3180,"score":3181},"### Environment\n\nnode22, nuxtui300-b3 and nuxt3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv.3.0.0-beta3\n\n### Reproduction\n\nYou can reproduce from the components page for modal and drawer. Open the drawer, the bottom drawer appears, and rest of page shifts from removal of scrollbar. Same does not occur on the modal component.\n\n### Description\n\nThe modal component properly handles overflow and prevents shifting of the main page layout when open. The drawer component does not. Would like to see the drawer prevent layout shift from the scroll bar removal, like is done on the modals. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3168,3169,3170,3171,3174],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},{"name":3172,"color":3173},"closed-by-bot","ededed",{"name":3175,"color":3173},"stale",3523,"closed","Drawer shifts layout unlike modal","2025-06-18T09:01:40Z","https://github.com/nuxt/ui/issues/3523",0.7012667,{"description":3183,"labels":3184,"number":3187,"owner":3147,"repository":3148,"state":3177,"title":3188,"updated_at":3189,"url":3190,"score":3191},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.6\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-agnesi-drlrh4?file=%2Fapp%2Fpages%2Findex.vue%3A24%2C24\n\n### Description\n\nWhen I close a `UDrawer` that I opened via an action from a `UDropdownMenu`, the style on my \u003Cbody> tag still contains `overflow: hidden` and `user-select: none`, which prevents interaction with the page.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3185,3186],{"name":3138,"color":3139},{"name":3141,"color":3142},3406,"User interaction lock after a Drawer/DropdownMenu","2025-02-27T20:57:27Z","https://github.com/nuxt/ui/issues/3406",0.7089157,{"labels":3193,"number":3200,"owner":3147,"repository":3147,"state":3177,"title":3201,"updated_at":3202,"url":3203,"score":3204},[3194,3197],{"name":3195,"color":3196},"enhancement","8DEF37",{"name":3198,"color":3199},"2.x","d4c5f9",10299,"Layout options","2025-03-12T16:25:33Z","https://github.com/nuxt/nuxt/issues/10299",0.71246713,{"description":3206,"labels":3207,"number":3213,"owner":3147,"repository":3148,"state":3177,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### 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```",[3208,3209,3210],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3211,"color":3212},"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.71319985,{"description":3219,"labels":3220,"number":3224,"owner":3147,"repository":3148,"state":3177,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.26.2 \n- Nitro Version: 2.12.3 \n- Package Manager: npm@11.2.0 \n- Builder: - \n- User Config: compatibilityDate, ssr, routeRules, experimental, modules, alias, imports, runtimeConfig, css, app, nodemailer, auth, headlessui, eslint, nitro, image, ui, fonts, icon, pinia, sitemap, colorMode, $production,\n $development, i18n, vite \n- Runtime Modules: nuxt-security@2.2.0, @nuxtjs/color-mode@3.5.2, @nuxt/ui-pro@3.2.0, @nuxtjs/sitemap@7.4.3, @nuxtjs/i18n@9.5.6, @nuxtjs/robots@5.4.0, @nuxt/devtools@2.6.2, @pinia/nuxt@0.9.0, @nuxtjs/fontaine@0.4.4, @nuxt/scrip\nts@0.10.5, @vueuse/nuxt@12.8.2, nuxt-mongoose@1.0.6, @sidebase/nuxt-auth@0.10.1, @nuxt/icon@1.15.0, @nuxt/fonts@0.10.3, nuxt-headlessui@1.2.0, nuxt-nodemailer@1.1.2, @nuxt/test-utils/module@3.19.2, @nuxtjs/leaflet@1.2.6, @nuxtjs/tailwindcss@7.0.0-beta.0, @nuxt/image@1.10.0 \n- Build Modules: - \n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/unruffled-frog-pz7l74\n\n### Description\n\nHi,\nWhen using the UDashboardSidebar component from @nuxt/ui-pro in a layout with RTL (right-to-left) direction, the sidebar resizing behavior is incorrect.\n\nWhen dragging the resizer handle:\n\n Moving the mouse to the right expands (makes wider) the sidebar (but it should shrink in RTL).\n\n Moving the mouse to the left shrinks (makes narrower) the sidebar (but it should expand in RTL).\n\n\nExpected Behavior:\n\nIn RTL mode:\n\n Dragging right should decrease sidebar width.\n\n Dragging left should increase sidebar width.\n\nThis should match the natural directionality of RTL layouts.\n\n\nPrevious report:\n\nThis issue was previously reported in [#4293](https://github.com/nuxt/ui/issues/4293), but it still persists.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3221,3222,3223],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},4547,"UDashboardSidebar resize direction is inverted in RTL mode","2025-07-21T08:42:26Z","https://github.com/nuxt/ui/issues/4547",0.72027117,{"description":3230,"labels":3231,"number":3233,"owner":3147,"repository":3147,"state":3177,"title":3234,"updated_at":3235,"url":3236,"score":3237},"Hello. I got an error when trying to use with Nuxt\r\n\r\n```\r\nvue.runtime.esm.js:430 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n```\r\n\r\nI have Modal component, that I want to render outside of component, where I am calling modal.\r\n\r\nI have this:\r\n\r\nThis is where I want to render Modal component:\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\n div\r\n my-header\r\n .flex-sticky\r\n nuxt.content\r\n my-footer\r\n portal-target(name=\"destination\")\r\n\u003C/template>\r\n```\r\n\r\nThis is where I am calling Modal component\r\n\r\n```\r\n\u003Ctemplate lang=\"pug\">\r\ndiv\r\n portal(to=\"destination\")\r\n modal\r\n\u003C/template>\r\n```\r\nSorry for Pug. If needed, I rewrite it with HTML.\r\nPlease assist me to fix this issue with this awesome library.\r\nIs it compatible with Nuxt?\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/c1333\">#c1333\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3232],{"name":3198,"color":3199},1497,"Got an hydration error when use vue-portal","2023-01-18T15:41:51Z","https://github.com/nuxt/nuxt/issues/1497",0.7273204,{"description":3239,"labels":3240,"number":3246,"owner":3147,"repository":3148,"state":3177,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### Environment\n\nDevice: iPad Pro 18.1.1\n\n\n\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nhttps://ui.nuxt.com/\n\n### Description\n\n## Dropdown-Menu\n\nhttps://ui3.nuxt.dev/components/dropdown-menu#content\n\n- Pen-clicking an item within the dropdown, no matter the level, does not work\n\nOther components, like `ColorModeSelect` and `LocaleSelect` work.\n\n## Modals\n\nhttps://ui3.nuxt.dev/components/modal#title\n\n- Pen-clicking the \"close\" button on the top right does not work.\n\n## Popover\n\nhttps://ui3.nuxt.dev/components/modal#title\n\n- Touch-clicking \"Open\" does not work\n- Pen-clicking \"Open\" does not work\n\n## ColorPicker\n\nhttps://ui3.nuxt.dev/components/color-picker#usage\n\n- Touch-clicking/dragging does scroll the whole window\n- Pen-clicking/dragging on the vertical scrollbar does scroll the whole window\n\nOther componen ts, like `Slider` does actually work fine in vertical mode.\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3241,3242,3243,3244,3245],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},{"name":3172,"color":3173},{"name":3175,"color":3173},3291,"Defects on various components on iOS devices with pen / touch","2025-08-20T02:09:25Z","https://github.com/nuxt/ui/issues/3291",0.72737354,{"description":3252,"labels":3253,"number":3257,"owner":3147,"repository":3148,"state":3177,"title":3258,"updated_at":3259,"url":3260,"score":3261},"### 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>",[3254,3255,3256],{"name":3138,"color":3139},{"name":3141,"color":3142},{"name":3144,"color":3145},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.7282728,["Reactive",3263],{},["Set"],["ShallowReactive",3266],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2Ld9pvhsULdKki0UKGd6GXWln7xUcBcJhSl76fgFggQ":-1},"/nuxt/ui/3078"]