` 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```",[3147,3150,3153],{"name":3148,"color":3149},"bug","d73a4a",{"name":3151,"color":3152},"v3","49DCB8",{"name":3154,"color":3155},"triage","ffffff",4599,"ui","DashboardSidebar: v-model:open not working as expected","2025-07-25T16:31:55Z","https://github.com/nuxt/ui/issues/4599",0.7197459,{"description":3163,"labels":3164,"number":3173,"owner":3138,"repository":3157,"state":3174,"title":3175,"updated_at":3176,"url":3177,"score":3178},"### Environment\r\n\r\n- Operating System: Windows_NT\r\n- Node Version: v18.19.1\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: pnpm@8.11.0\r\n- Builder: -\r\n- User Config: devtools, modules, tailwindcss, i18n, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @nuxt/ui@2.15.2-28557281.8d9d973, @nuxtjs/i18n@8.3.0, @vueuse/nuxt@10.9.0\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nnpm:@nuxt/ui-edge@latest\r\n\r\n### Reproduction\r\n\r\n const coverInfoStore = useCoverInfoStore()\r\n\r\n\u003CUTextarea v-model=\"coverInfoStore.coverTitle\" />\r\n \u003CUInput v-model=\"coverInfoStore.coverTitle\" />\r\n\r\n### Description\r\n\r\nProblem:\r\nWhen using UTextarea component in conjunction with pinia and v-model, there is an inconsistency in behavior compared to using UInput.\r\n\r\nExpected Behavior:\r\nBoth UInput and UTextarea should behave consistently when used with pinia and v-model. Updates to the bound data should reflect immediately in both components.\r\n\r\nActual Behavior:\r\n\r\nWhen updating the data bound to UInput using v-model, the changes are reflected immediately in the UI.\r\nHowever, when updating the data bound to UTextarea using v-model, the changes are not reflected immediately. \r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[3165,3168,3171],{"name":3166,"color":3167},"question","d876e3",{"name":3169,"color":3170},"closed-by-bot","ededed",{"name":3172,"color":3170},"stale",1701,"closed","Inconsistent behavior with UTextarea, pinia, and v-model compared to UInput","2025-06-19T02:12:43Z","https://github.com/nuxt/ui/issues/1701",0.68246746,{"description":3180,"labels":3181,"number":3189,"owner":3138,"repository":3138,"state":3174,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v18.14.0`\r\n- Nuxt Version: `3.4.2`\r\n- Nitro Version: `2.3.3`\r\n- Package Manager: `pnpm@8.2.0`\r\n- Builder: `vite`\r\n- User Config: `ssr`, `dev`, `experimental`, `vite`, `typescript`, `css`, `sourcemap`, `runtimeConfig`, `modules`, `devtools`, `content`, `colorMode`, `robots`, `htmlValidator`, `routeRules`\r\n- Runtime Modules: `@nuxt/devtools@0.4.1`, `@nuxt/content@2.6.0`, `@nuxt/image-edge@1.0.0-28020728.5df24eb`, `@nuxtjs/tailwindcss@6.6.6`, `@nuxtjs/color-mode@3.2.0`, `@nuxtjs/robots@3.0.0`, `@nuxtjs/html-validator@1.2.5`, `@pinia/nuxt@0.4.9`, `@vueuse/nuxt@10.1.0`, `nuxt-headlessui@1.1.4`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nI did not manage to create a minimal reproduction yet. I still thought it is useful to open the issue in hope to find others with the same issue.\n\n### Describe the bug\n\nAfter enabling `experimental.renderJsonPayloads`, I have the problem that the pinia state is different on the client.\r\n\r\nInside a component:\r\n```ts\r\nconst auth = useAuthStore() // A pinia store\r\n\r\n// server { .... }\r\n// client null\r\nconsole.log(process.server ? 'server' : 'client', auth.user)\r\n```\r\n\r\nThis is fixed after disabling `experimental.renderJsonPayloads` again.\n\n### Additional context\n\n`auth.user` is set inside an async store method, which makes a HTTP request.\r\nThis store method is called inside a global middleware on the server.\n\n### Logs\n\n_No response_",[3182,3185,3186],{"name":3183,"color":3184},"3.x","29bc7f",{"name":3135,"color":3136},{"name":3187,"color":3188},"needs reproduction","FBCA04",20448,"experimental.renderJsonPayloads results in missing pinia state on the client","2023-07-13T18:07:42Z","https://github.com/nuxt/nuxt/issues/20448",0.71474975,{"description":3195,"labels":3196,"number":3202,"owner":3138,"repository":3138,"state":3174,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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_",[3197,3198,3199],{"name":3183,"color":3184},{"name":3135,"color":3136},{"name":3200,"color":3201},"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.7193022,{"description":3208,"labels":3209,"number":3212,"owner":3138,"repository":3138,"state":3174,"title":3213,"updated_at":3214,"url":3215,"score":3216},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v16.17.1`\r\n- Nuxt Version: `3.0.0-rc.12`\r\n- Nitro Version: `0.6.0`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `meta`, `modules`, `image`, `components`, `build`, `css`, `postcss`, `vite`\r\n- Runtime Modules: `@pinia/nuxt@0.4.3`, `nuxt-icons@2.0.2`, `@vueuse/nuxt@9.4.0`, `@nuxt/image-edge@1.0.0-27769790.4b27db3`\r\n- Build Modules: `-`\n\n### Reproduction\n\n**Source code**\r\nhttps://github.com/novicell/nuxt3-boilerplate/tree/repro/ssr-layout-hydration\r\n\r\n**Deployed version**\r\nhttps://repro-ssr-layout-hydration--novicell-nuxt3-boilerplate.netlify.app/\n\n### Describe the bug\n\nHi!\r\n\r\nWe have a general Nuxt 3 boilerplate at Novicell that we use to build various client websites.\r\n\r\nWe've encountered a problem with server side rendering things that is loaded in the layout such as navigation, footer etc.\r\n\r\nWe use `useAsyncData` inside our `[...slug].vue` for rendering CMS pages. To save requests we usually include the navigation in the response on the first page load and set it in our Pinia store which is then loaded inside the layout.\r\n\r\nIt looks like the layout is rendered before the `[...slug].vue` and is not hydrated during SSR until the page is loaded.\r\n\r\nI've made a small example where I have an initial value in the store that is then updated upon fetch of the page.\r\n\r\n**SSR value**\r\n\r\n\r\n**Hydrated value**\r\n\r\n\r\nI'm not sure if this is a bug or a matter of configuration, but please let us know how to solve it 😄 \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3210,3211],{"name":3183,"color":3184},{"name":3135,"color":3136},15474,"Pinia store values in layout is not server side rendered","2024-01-11T21:54:36Z","https://github.com/nuxt/nuxt/issues/15474",0.7205179,{"description":3218,"labels":3219,"number":3224,"owner":3138,"repository":3157,"state":3174,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### For what version of Nuxt UI are you suggesting this?\n\nv3.0.0-alpha.x\n\n### Description\n\nAs of now, in Nuxt UI v3.0.0-alpha.x, the `SIDE_OPTIONS` constant is defined as follows:\n\n``` ts\nconst SIDE_OPTIONS: [\"top\", \"right\", \"bottom\", \"left\"];\n```\n\nThe current four directions cannot meet the practical development needs. For example, when there is a button on the far right of the screen to open a dropdown menu, it cannot automatically appear as 'bottom-right'.Tooltips, dropdown menus, or popovers may require positioning beyond the basic cardinal directions to avoid obscuring content or to better fit within the viewport.\n\n#### Proposed Enhancement\n\nI propose to extend the SIDE_OPTIONS constant to include combinations of the cardinal directions to allow for greater flexibility and finer control over positioning. The updated SIDE_OPTIONS would be:\n\n``` ts\nconst SIDE_OPTIONS = [\n \"top\", \"right\", \"bottom\", \"left\",\n \"bottom-left\", \"bottom-right\",\n \"left-top\", \"left-bottom\",\n \"top-left\", \"top-right\",\n \"right-top\", \"right-bottom\"\n];\n```\n\n\n### Additional context\n\n| | |\n| ----------- | ----------- |\n|  | |\n\n\n",[3220,3223],{"name":3221,"color":3222},"enhancement","a2eeef",{"name":3151,"color":3152},2712,"Side needs more direction","2024-11-20T19:59:29Z","https://github.com/nuxt/ui/issues/2712",0.7213634,{"description":3230,"labels":3231,"number":3234,"owner":3138,"repository":3138,"state":3174,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.2\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.6\r\n- Package Manager: yarn@4.1.1\r\n- Builder: -\r\n- User Config: devtools, modules, piniaPersistedstate, watch\r\n- Runtime Modules: @pinia/nuxt@0.5.1, @pinia-plugin-persistedstate/nuxt@1.2.0\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://gitlab.com/javier-sedano/ufe5\r\n\r\nHowever, I have applied the workaround defined in https://github.com/nuxt/nuxt/issues/22943#issuecomment-1702506306 so in order to reproduce it again, comment out some lines:\r\n\r\nThe architecture is a bit complex (it is a microfrontend poc) so use:\r\n\r\nyarn install\r\nyarn initAll\r\nedit app-core/node_modules/javier-sedano-ufe5-store-library-pinia/src/stores/total.store.ts and comment out the workaround from lines 7-8.\r\nyarn dev\r\nbrowse localhost:4100\r\n\r\nWARNING: upon reload, it does not fail anymore, it only fails in the first load after a fresh start.\r\n\n\n### Describe the bug\n\nThe console complains with:\r\n\r\nLooks like the bug was detected in Nuxt 3.7.0 and fixed in 3.7.something. It has appeared again, I think. I have verified that it works with Nuxt 3.10.2 and fails with Nuxt 3.10.3 (edit app-core/package.json to check this).\r\n\n\n### Additional context\n\nMateuszStawski says in https://github.com/nuxt/nuxt/issues/22943#issuecomment-2119360501 that it fails for him as well.\n\n### Logs\n\n_No response_",[3232,3233],{"name":3135,"color":3136},{"name":3187,"color":3188},27447,"'getActivePinia()\" was called but there was no active Pinia' is back","2024-10-17T08:09:57Z","https://github.com/nuxt/nuxt/issues/27447",0.7241747,{"description":3240,"labels":3241,"number":3244,"owner":3138,"repository":3138,"state":3174,"title":3245,"updated_at":3246,"url":3247,"score":3248},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.7.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: npm@10.1.0\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/lubomirblazekcz/nuxt-layout-repro\r\n\r\n### Describe the bug\r\n\r\nAs mentioned in https://github.com/nuxt/nuxt/issues/15158#issuecomment-1397373067, if NuxtLayout is used in page, the whole layout is re-rendered, even if the contents of the layout don't change.\r\n\r\nThis is clearly visible in repro, the animation occures on each page because of the layout re-render.\r\n\r\nHere is a repro where animation occures only when the layout changes, which would be correct behaviour. This is because the layout is defined in `app.vue`, instead of page - but this is not ideal, because then slot & template doesn't work which is also mentioned in https://github.com/nuxt/nuxt/issues/15158\r\n\r\nhttps://stackblitz.com/github.com/lubomirblazekcz/nuxt-layout-repro/tree/working\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3242,3243],{"name":3183,"color":3184},{"name":3135,"color":3136},23421,"Layout re-renders even if the layout contents are same","2023-09-27T05:47:09Z","https://github.com/nuxt/nuxt/issues/23421",0.7244903,{"description":3250,"labels":3251,"number":3255,"owner":3138,"repository":3138,"state":3174,"title":3256,"updated_at":3257,"url":3258,"score":3259},"\u003C!-- 💚 Thanks for your time to make Nuxt better with your feedbacks 💚\r\n\r\n**IMPORTANT** Before reporting a bug:\r\n\r\n- Please make sure that you have read through Nuxt documentation: https://nuxtjs.org\r\n- If issue is related to a module please create the issue in corresponding repository\r\n- Ensure using latest version of nuxt dependencies using `yarn upgrade nuxt` or `npm upgrade nuxt`\r\n\r\n👍 A properly detailed bug report can save a LOT of time and help fixing issues as soon as possible.\r\n-->\r\n\r\n### Versions\r\n\r\n- nuxt: \u003C!-- ex: v2.13.0 -->\"nuxt\": \"^2.14.6\",\r\n- node: \u003C!-- ex: v12.14.0 -->\r\n\r\n### Reproduction\r\nI am creating a custom plugin for axios so it will be injected to root and context ( please don't suggest me to use @nuxt/axios, I am using it as an example ) and in there I am using store as well as i18n.locale. It works fine until I make a change to the vuex state or change locale of i18n, the plugin does not update when any of these these are changed,\r\nSample code: @/plugins/axios.js\r\n\r\n\u003C!--\r\nLink to a minimal test case based on one of:\r\n- A fork of https://template.nuxtjs.org\r\n- A GitHub repository that can reproduce the bug\r\nWithout a reproduction, it is so hard to address problem :(\r\n-->\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\n\u003C!-- Attaching `nuxt.config`, dependencies, logs or code snippets would help to find the issue -->\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n```\r\nimport axios from \"axios\";\r\nexport default ({ app, store }, inject) => {\r\n const lang = app.i18n.locale;\r\n const token = store.getters[\"auth/token\"]\r\n const baseAxios = axios.create({\r\n baseURL: \"...\",\r\n headers: {\r\n Authorization: `Bearer ${token}`,\r\n lang\r\n }\r\n });\r\n inject(\"axios\", baseAxios);\r\n};\r\n```\r\n\r\n### What is Expected?\r\nI want the plugin to update to the lates state of vuex. (state of `token` in my case)\r\n\r\n### What is actually happening?\r\nIt is not reactive to store changes",[3252],{"name":3253,"color":3254},"2.x","d4c5f9",8682,"Store in custom plugin is not reactive","2023-01-18T15:31:07Z","https://github.com/nuxt/nuxt/issues/8682",0.7270732,["Reactive",3261],{},["Set"],["ShallowReactive",3264],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fT9eQRLUeYmHyNQ_ulqLDZKvK5mLUY01qqnIiPq2GUzE":-1},"/nuxt/ui/1792"]