` 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```",[3171,3174,3177],{"name":3172,"color":3173},"bug","d73a4a",{"name":3175,"color":3176},"v3","49DCB8",{"name":3178,"color":3179},"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.6641143,{"description":3189,"labels":3190,"number":3193,"owner":3181,"repository":3182,"state":3183,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Environment\n\n- Node Version: v20.12.1\n- Nuxt Version: 4.0.3\n- CLI Version: 3.28.0\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: devtools, modules, css, compatibilityDate\n- Runtime Modules: @nuxt/ui@4.0.0-alpha.0, @nuxt/eslint@1.9.0, @vueuse/nuxt@13.7.0\n- Build Modules: -\n\n### Version\n\nv4.0.0-alpha.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/pxxcvj\n\n### Description\n\nAttaching a read-only `:collapsed` to `DashboardSidebar` does not prevent `DashboardSidebarCollapse` from collapsing/expanding the sidebar.\n\nIn the reproduction, when you change the width of the screen to be narrower than `96rem`, sidebar will always collapse. When you widen it back out, sidebar will expand if it was expanded before.\n\nIf you make the screen narrower until the sidebar collapses, and then press the `DashboardSidebarCollapse`, it will expand, despite the fact that the computed `collapsed` is still `true`.\n\nIn the reproduction that is represented by having `collapsed: true` written on the page, but the sidebar being expanded.\n\nExpected the sidebar to keep being collapsed, until computed `collapsed` becomes `false`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3191,3192],{"name":3172,"color":3173},{"name":3178,"color":3179},4789,"v4: `DashboardSidebarCollapse` controls the `DashboardSidebar` despite its `collapsed` value being readonly","2025-08-19T06:50:12Z","https://github.com/nuxt/ui/issues/4789",0.68065584,{"description":3199,"labels":3200,"number":3205,"owner":3181,"repository":3182,"state":3206,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\n- https://hgmd6j-3000.csb.app/\n- https://codesandbox.io/p/devbox/aged-rain-hgmd6j?file=%2Fapp%2Fapp.vue%3A129%2C26\n\n### Description\n\nWhen `DashboardSidebar` is not resizable, the props `default-size`, `min-size` and `max-size` do not seem to have any effect.\n\nYou can see in the example above (first link) that the sidebar should have a fixed width but it does resize depending on browser window width.",[3201,3202,3203],{"name":3172,"color":3173},{"name":3178,"color":3179},{"name":3204,"color":3176},"v4",5133,"closed","DashboardSidebar size-props have no effect","2025-10-03T13:13:38Z","https://github.com/nuxt/ui/issues/5133",0.67115635,{"description":3212,"labels":3213,"number":3217,"owner":3181,"repository":3182,"state":3206,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### 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>",[3214,3215,3216],{"name":3172,"color":3173},{"name":3175,"color":3176},{"name":3178,"color":3179},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.6777731,{"description":3223,"labels":3224,"number":3237,"owner":3181,"repository":3181,"state":3206,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Environment\n\nNuxi 3.6.2 \r\n \r\nRootDir: /home/ben/workspace/ceasy/packages/app/web \r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.9.0\r\n- Nuxt Version: 3.6.2\r\n- Nitro Version: 2.5.2\r\n- Package Manager: npm@8.19.1\r\n- Builder: vite\r\n- User Config: telemetry, modules, tailwindcss, colorMode, typescript, alias, vite, runtimeConfig, experimental\r\n- Runtime Modules: @nuxtjs/color-mode@^3.3.0, @nuxtjs/tailwindcss@^6.8.0, unplugin-icons/nuxt, @nuxt/image@1.0.0-rc.3, @sidebase/nuxt-pdf\r\n- Build Modules: -\n\n### Reproduction\n\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst props = defineProps\u003C{\r\n scaleSize: number\r\n currentHeight: number\r\n}>()\r\n\r\nconst heightStyle = computed(() => ({ height: `${props.currentHeight}px` }))\r\nconst mainStyle = computed(() => ({\r\n scale: props.scaleSize,\r\n transformOrigin: `top`,\r\n}))\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"m-4 print:m-0\" :style=\"heightStyle\">\r\n \u003Cmain :style=\"mainStyle\">\r\n {{ heightStyle }}\r\n {{ mainStyle }}\r\n \u003C/main>\r\n \u003C/div>\r\n\u003C/template>\r\n```\n\n### Describe the bug\n\nThe scaleSize and currentHeight are based on https://vueuse.org/core/useWindowSize/#usewindowsize\r\n\r\nSo it's normal that during SSR the window size is incorrect, since it's unknown.\r\n\r\nThe defaults for the props in that case are:\r\n\r\n```\r\n{\r\n scaleSize: 1\r\n currentHeight: 794\r\n}\r\n```\r\n\r\nAfter the hydration however, the above component renders to:\r\n\r\n```html\r\n\u003Cdiv class=\"m-4 print:m-0\" style=\"height:794px;\">\u003Cmain style=\"scale:1;transform-origin:top;\">{\r\n \"height\": \"513.9670710571924px\"\r\n} {\r\n \"scale\": 0.6473136915077989,\r\n \"transformOrigin\": \"top\"\r\n}\u003C/main>\u003C/div>\r\n```\r\n\r\n```vue\r\n {{ heightStyle }}\r\n {{ mainStyle }}\r\n```\r\n\r\nrenders correctly, but \r\n\r\n```vue\r\n:style=\"heightStyle\"\r\n```\r\n\r\ndoes not get updated.\r\n\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3225,3228,3231,3234],{"name":3226,"color":3227},"3.x","29bc7f",{"name":3229,"color":3230},"pending triage","E99695",{"name":3232,"color":3233},"needs reproduction","FBCA04",{"name":3235,"color":3236},"⛔️ can be closed","484893",24200,"style of element not updated after hydration","2024-03-29T17:26:17Z","https://github.com/nuxt/nuxt/issues/24200",0.6803406,{"description":3243,"labels":3244,"number":3247,"owner":3181,"repository":3182,"state":3206,"title":3248,"updated_at":3249,"url":3250,"score":3251},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3245,3246],{"name":3172,"color":3173},{"name":3175,"color":3176},4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.68187255,{"description":3253,"labels":3254,"number":3258,"owner":3181,"repository":3182,"state":3206,"title":3259,"updated_at":3260,"url":3261,"score":3262},"### Environment\n\n- Operating System: Linux\n- Node Version: v24.9.0\n- Nuxt Version: 4.1.2\n- CLI Version: 3.28.0\n- Nitro Version: 2.12.6\n- Package Manager: pnpm@10.18.0\n- Builder: -\n- User Config: runtimeConfig, modules, css, $development, security, site, openFetch, nitro, pwa, compatibilityDate\n- Runtime Modules: @vite-pwa/nuxt@1.0.4, @nuxt/ui@4.0.1, @pinia/nuxt@0.11.2, pinia-plugin-persistedstate/nuxt@4.5.0, nuxt-open-fetch@0.13.5, nuxt-security@2.4.0, @nuxtjs/seo@3.2.2, @nuxt/content@3.7.1, @nuxtjs/i18n@10.1.0, @vueuse/nuxt@13.9.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv4.x\n\n### Version\n\nv4.0.1\n\n### Reproduction\n\nHost a build generated with`pnpm nuxt generate` on https://github.com/GreyXor/bad-ssg-nuxtui\nthen click on the collapsed sidebar. icon is not here\n\n### Description\n\nHello, I see that the collapsed icon is not here on my SSG (SSR+SPA) web app. it's just a demo.\nwith `pnpm dev` it's working but not with `pnpm nuxt generate`\n\nbefore\n\u003Cimg width=\"576\" height=\"298\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7bafd2d2-9eba-4aa8-871e-65373e24ec42\" />\n\nafter: you can see the icon is not here\n\u003Cimg width=\"480\" height=\"364\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2876878c-4bcf-42b9-b202-720f89756e71\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nI tried all nuxt icon server bundle mode. same result each time\n\nNuxt Icon server bundle mode is set to local\n```",[3255,3256,3257],{"name":3172,"color":3173},{"name":3178,"color":3179},{"name":3204,"color":3176},5142,"Icons not bundled on SSG (SSR+SPA) full static (SSR + nuxt generate)","2025-10-05T14:50:49Z","https://github.com/nuxt/ui/issues/5142",0.6825459,{"description":3264,"labels":3265,"number":3271,"owner":3181,"repository":3181,"state":3206,"title":3272,"updated_at":3273,"url":3274,"score":3275},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@3.2.0\r\n- Builder: vite\r\n- User Config: alias, app, components, css, devtools, experimental, extends, i18n, modules, nitro, pinia, router, runtimeConfig, tailwindcss, telemetry, veeValidate, vite, vue\r\n- Runtime Modules: @pinia/nuxt@^0.4.11, @nuxtjs/stylelint-module@^5.1.0, @nuxtjs/i18n@8.0.0-beta.13, @vueuse/nuxt@10.2.1, @vee-validate/nuxt@^4.9.6, @nuxtjs/tailwindcss@^6.8.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\nI provide a minimal reproduction\r\n\r\nhttps://stackblitz.com/edit/github-brcyvh?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI'm using a plugin `$bp` that use `useBreakpoints` from `vueuse` under the hood https://vueuse.org/core/useBreakpoints\r\n\r\nMy goal is to change the `size` of the component `NButton` based on a boolean : `$bp.isLapM`.\r\n\r\nWhen we refresh the page, we see that the `btnSize` inside the button is updated but the class still `-sm`.\r\nIf I resize my window, both are updated\r\n\r\nWe are migrating our app to Nuxt 3, and on Nuxt 2 we didn't have this issue... :cry: \r\n\r\nI'm a doing something wrong about this ? \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_",[3266,3267,3268],{"name":3226,"color":3227},{"name":3229,"color":3230},{"name":3269,"color":3270},"upstream","E8A36D",22722,"class / style attribute does not update on node mismatch","2023-08-23T10:38:59Z","https://github.com/nuxt/nuxt/issues/22722",0.6880422,{"description":3277,"labels":3278,"number":3284,"owner":3181,"repository":3181,"state":3206,"title":3285,"updated_at":3286,"url":3287,"score":3288},"### Environment\r\n\r\nNuxt 3.8.0-28284309.b3d3d7f4 with Nitro 2.6.3 \r\n \r\n\r\n### Reproduction\r\nhttps://github.com/imcm7/nuxt-db/blob/main/nuxt.config.ts\r\n \r\n\r\n\r\n### Describe the bug\r\n \r\n ➜ Local: http://localhost:3000/\r\n ➜ Network: use --host to expose\r\n\r\nℹ Adding @auth/nuxt module... { verifyClientOnEveryRequest: true, @auth/nuxt 5:49:16 PM\r\n guestRedirectTo: '/',\r\n authenticatedRedirectTo: '/',\r\n baseUrl: '' }\r\n✔ Added @auth/nuxt module successfully. @auth/nuxt \r\nℹ Using default Tailwind CSS file nuxt:tailwindcss \r\n\r\n WARN Nuxt DevTools only supports Vite mode, module is disabled. 5:49:19 PM\r\n\r\nℹ Tailwind Viewer: http://localhost:3000/_tailwind/ nuxt:tailwindcss \r\n\r\n ERROR Cannot start nuxt: Maximum call stack size exceeded \r\n\r\n at deepmerge (node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:100:19)\r\n at cloneUnlessOtherwiseSpecified (node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:34:5)\r\n at node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:94:23\r\n at Array.forEach (\u003Canonymous>)\r\n at mergeObject (node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:86:18)\r\n at deepmerge (node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:117:10)\r\n at cloneUnlessOtherwiseSpecified (node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:34:5)\r\n at node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:94:23\r\n at Array.forEach (\u003Canonymous>)\r\n at mergeObject (node_modules/.pnpm/deepmerge@4.3.1/node_modules/deepmerge/dist/cjs.js:86:18)\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_",[3279,3280,3281,3282],{"name":3226,"color":3227},{"name":3172,"color":3173},{"name":3269,"color":3270},{"name":3283,"color":3233},"🔨 p3-minor",23644,"Switched from bun to pnpm and builder: 'webpack'","2023-10-16T12:54:05Z","https://github.com/nuxt/nuxt/issues/23644",0.6905585,{"description":3290,"labels":3291,"number":3294,"owner":3181,"repository":3181,"state":3206,"title":3295,"updated_at":3296,"url":3297,"score":3298},"### Environment\n\n- Operating System: Windows_NT\r\n- Node Version: v22.1.0\r\n- Nuxt Version: 3.11.2\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: npm@10.7.0\r\n- Builder: -\r\n- User Config: devtools, ssr, modules, alias, colorMode, vuefire\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.12.0, shadcn-nuxt@0.10.4, nuxt-vuefire@1.0.2, @vueuse/nuxt@10.9.0, @pinia/nuxt@0.5.1, @nuxtjs/color-mode@3.4.1\r\n- Build Modules: -\n\n### Reproduction\n\nAny project\n\n### Describe the bug\n\nWhen saving changes in HTML/template the website updates.\r\nWhen saving changes in Javascript/script the website updates.\r\nWhen saving changes in CSS the website **does not** updates.\r\nA manual refresh is necessary, or adding a space in the script part.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3292,3293],{"name":3226,"color":3227},{"name":3229,"color":3230},27769,"Nuxt doesn't update when making CSS changes","2024-06-21T17:55:28Z","https://github.com/nuxt/nuxt/issues/27769",0.6942902,["Reactive",3300],{},["Set"],["ShallowReactive",3303],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fAT5Ttx13JcJmcdzUED8paLBCFGPUzTMZ8aUG9v7nBr8":-1},"/nuxt/ui/5143"]