` 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```",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"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.6685595,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3028,"state":3030,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v16.19.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.4.0\r\n- Builder: -\r\n- User Config: devtools, modules, sanity, css, supabase, app, vite\r\n- Runtime Modules: @nuxtjs/supabase@1.1.6, @nuxtjs/sanity@1.8.3\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/elisabetperez/nuxt-layouts\r\n\n\n### Describe the bug\n\nHello, I'm developing a project with Nuxt 3 and Vue 3 and I'm experiencing an issue with layout transitions: they're not working and the page stays blank. \r\nI created a Stackblitz for you to check the issue I'm experiencing: https://stackblitz.com/~/github.com/elisabetperez/nuxt-layouts\r\n\r\n\n\n### Additional context\n\nI've got two layouts: full and sidenav. I've got two pages too: index.vue and library.vue. Each of them has the name of the layout they need defined in definePageMeta. In addition to this, nuxt.config.ts has the layoutTransition defined and the style of the transition is defined in app.vue just like the documentation states. What am I missing? Thanks!\n\n### Logs\n\n_No response_",[3038],{"name":3039,"color":3040},"pending triage","E99695",25748,"Layout transition is not working","2024-06-30T11:05:47Z","https://github.com/nuxt/nuxt/issues/25748",0.6861531,{"labels":3047,"number":3052,"owner":3028,"repository":3028,"state":3053,"title":3054,"updated_at":3055,"url":3056,"score":3057},[3048,3051],{"name":3049,"color":3050},"3.x","29bc7f",{"name":3039,"color":3040},13285,"closed","Page layout not working as intended","2023-01-19T16:51:10Z","https://github.com/nuxt/nuxt/issues/13285",0.6624244,{"description":3059,"labels":3060,"number":3063,"owner":3028,"repository":3028,"state":3053,"title":3064,"updated_at":3065,"url":3066,"score":3067},"### Environment\n\nNuxi 3.3.3 16:40:34\r\n 16:40:35\r\nRootDir: C:/Users/d91589/Desktop/Projects/onlylaw/frontend-nuxt 16:40:35\r\nNuxt project info: 16:40:35\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.3.3`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@9.6.2`\r\n- Builder: `vite`\r\n- User Config: `imports`, `typescript`, `modules`, `runtimeConfig`, `experimental`, `vite`, `css`, `i18n`, `pinia`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0-beta.10`, `@vueuse/nuxt@9.13.0`, `@pinia/nuxt@0.4.6`, `@nuxtjs/device@3.1.0`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nProblem is clear from description\n\n### Describe the bug\n\nI use \r\n```\r\ndefinePageMeta({\r\n layout: \"layoutname\",\r\n});\r\n```\r\n to change the layout for different pages. \r\n\r\nFirst layout: \r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CLayoutHeader>\u003C/LayoutHeader>\r\n \u003Cslot>\u003C/slot>\r\n \u003CLayoutFooter>\u003C/LayoutFooter>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nSecond layout: \r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CLayoutHeader>\u003C/LayoutHeader>\r\n \u003Cslot>\u003C/slot>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nWhen I change the layout, the header component rerenders. I think components that already exist in a layout should not be rerendered. Is that a bug or expected behavior?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3061,3062],{"name":3049,"color":3050},{"name":3039,"color":3040},21062,"Changing layout rerenders existing layout components","2023-05-25T16:05:23Z","https://github.com/nuxt/nuxt/issues/21062",0.6762878,{"description":3069,"labels":3070,"number":3079,"owner":3028,"repository":3029,"state":3053,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.0\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.11\n- Package Manager: pnpm@10.9.0\n- Builder: -\n- User Config: modules, colorMode, image, content, plausible, devtools, hub, css, mdc, nitro, runtimeConfig, routeRules, future, compatibilityDate, eslint\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.0, @nuxt/content@3.5.1, @nuxthub/core@0.8.25, @nuxtjs/plausible@1.2.0, @vueuse/nuxt@13.1.0, nuxt-og-image@5.1.3\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\n1. Open [saas-template.nuxt.dev](https://saas-template.nuxt.dev/) in Safari on macOS 18.4.\n2. Scroll to the Testimonials section.\n3. Observe that after a line break in the grid, the first card in each new row is not rendered.\n4. Open Safari’s developer tools and disable the first CSS rule:\n```\n:is(.*:will-change-transform>*) {\n will-change: transform;\n}\n```\n5. Observe that the missing cards now appear, but borders render incorrectly.\n\n\n### Description\n\nOn Safari for macOS (Version 18.4 – 20621.1.15.11.10), using @nuxt/ui components in a responsive grid layout causes elements to disappear after a line break. Specifically, the first item in each new row is not rendered when will-change: transform is applied.\n\n**🔍 Context**\nThe issue is reproducible on your official SaaS template: [saas-template.nuxt.dev](https://saas-template.nuxt.dev/), in the testimonial section. This section uses only @nuxt/ui components – no @nuxt/ui-pro components are involved. The relevant code lives in [/app/pages/index.vue](https://github.com/nuxt-ui-pro/saas/blob/main/app/pages/index.vue), lines 58–80.\n\n**📍 Suspected Source**\nIn Safari, the following rule seems to break the layout:\n\n```\n:is(.*:will-change-transform>*) {\n will-change: transform;\n}\n```\nDisabling this rule in Safari's dev tools makes the hidden items visible again. However, doing so causes border-top rendering to break.\n\n\n**📸 Screenshots**\nIssue (first items not rendered):\n\n\nAfter disabling will-change (cards reappear):\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3071,3072,3075,3076],{"name":3019,"color":3020},{"name":3073,"color":3074},"duplicate","cfd3d7",{"name":3022,"color":3023},{"name":3077,"color":3078},"pro","5BD3CB",4026,"Safari Bug: Grid layout issues with `will-change: transform`","2025-04-30T13:51:05Z","https://github.com/nuxt/ui/issues/4026",0.67981243,{"description":3085,"labels":3086,"number":3089,"owner":3028,"repository":3028,"state":3053,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.16.0`\r\n- Nuxt Version: `3.1.0`\r\n- Nitro Version: `2.0.0`\r\n- Package Manager: `npm@8.11.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-cg71hh?file=package.json\r\n\r\n### Describe the bug\r\n\r\nThe class of the root div of a child component (`sidebar.vue`) , which is served by the layout component (`default.vue`), disappears aka is not rendered when upgrading from nuxt v3.0.0 to v3.1.0.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3087,3088],{"name":3049,"color":3050},{"name":3039,"color":3040},18509,"Root div class of layout child component missing","2023-01-26T16:12:41Z","https://github.com/nuxt/nuxt/issues/18509",0.6811734,{"description":3095,"labels":3096,"number":3101,"owner":3028,"repository":3028,"state":3053,"title":3102,"updated_at":3103,"url":3104,"score":3105},"### Environment\n\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.1\n- CLI Version: 3.19.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-aw3fsnzk?file=pages%2Findex.vue\n\n### Describe the bug\n\nI create a project with lastest version nuxt and create 3 pages , index ,accommodation ,posts . also i create a composables `usePostList` inside this i write function \n\n```ts\nexport default function () {\n const posts = ref\u003Cany[]>([]);\n\n async function getAllPost() {\n const response = await $fetch\u003C{ posts: any[] }>(\n 'https://dummyjson.com/posts'\n );\n posts.value = response.posts;\n }\n\n return {\n posts,\n getAllPost,\n };\n}\n```\n\nand call it in component `Posts.vue`\n\n```vue\n\n\u003Ctemplate>\n \u003Cdiv>\n \u003Cdiv v-for=\"post in posts\" :key=\"post.id\">\n \u003Cdiv>\n {{ post.title }}\n \u003C/div>\n \u003Cdiv class=\"\">\n {{ post.body }}\n \u003C/div>\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\u003Cscript lang=\"ts\" setup>\nconst { posts, getAllPost } = usePostList();\nonMounted(async () => {\n await getAllPost();\n});\n\u003C/script>\n\n```\n\nand pages structure just `index.vue` ,`acccomodation/index.vue` and `posts/index.vue`\n\npages `index.vue`\n\n```vue\n\n\u003Ctemplate>\n \u003Cdiv>Hallo\u003C/div>\n \u003CNuxtLink to=\"/accomodation\">Accommodation\u003C/NuxtLink>\n \u003Cbr />\n \u003CNuxtLink to=\"/posts\">Posts\u003C/NuxtLink>\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\nonMounted(() => {\n console.log('mounted index');\n});\n\u003C/script>\n\n```\npages/post `index.vue`\n\n```vue\n\n\u003Ctemplate>\n \u003CNuxtLink to=\"/\">Home\u003C/NuxtLink>\n \u003CPosts />\n\u003C/template>\n\u003Cscript setup lang=\"ts\">\u003C/script>\n```\n\nbut i counter and the pages `index.vue` was not rerender page when i navigate back from '/posts' to '/' . what i expect is the console.log() in index page should working while naviagate to it from post page . \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3097,3098],{"name":3039,"color":3040},{"name":3099,"color":3100},"possible regression","B90A42",30518,"unexpected behavior when using composables in a component to call external API, Some page not rerender while navigate","2025-01-10T21:35:03Z","https://github.com/nuxt/nuxt/issues/30518",0.6867024,{"description":3107,"labels":3108,"number":3112,"owner":3028,"repository":3028,"state":3053,"title":3113,"updated_at":3114,"url":3115,"score":3116},"When I use nuxt.js for server-side rendering,\r\nI will encounter the following two issues, it now appears that these two issues are caused by vue.js:\r\n\r\n1: I used the swiper component in the project. Since this component depends on the window object, I used the process.BROWSER_BUILD object judgment in nuxt.js to render the component only on the server side. When the page loads, the component renders correctly , The correct rendering, view the source code, you can see the corresponding swiper component code is not compiled before the component call code, such as: \u003Cswiper> ... \u003C/ swiper>, then the console by vue.js abnormal\r\n\r\n[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>. And performing full client-side render.\r\n\r\nThis should not have existed\r\n\r\n2: When I use the datalist element in html5 in a project, vue also throws an error like the one above\r\n\r\nSo I think, vue on the original html tags may not be sufficient to judge the rich, while rendering for the server, some judge is not perfect\r\n\r\nCan there be improvements, or temporary solutions? Thank you!\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/c182\">#c182\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3109],{"name":3110,"color":3111},"2.x","d4c5f9",209,"Server-side rendering and native html incompatibility issues","2023-01-18T15:38:39Z","https://github.com/nuxt/nuxt/issues/209",0.6872278,{"description":3118,"labels":3119,"number":3122,"owner":3028,"repository":3028,"state":3053,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Environment\n\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.19.0`\r\n- Nuxt Version: `3.3.3`\r\n- Nitro Version: `2.3.2`\r\n- Package Manager: `npm@8.19.3`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `imports`, `vite`, `postcss`, `modules`, `ssr`, `app`\r\n- Runtime Modules: `@pinia/nuxt@0.4.8`, `@element-plus/nuxt@1.0.4`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\ncan not provide\n\n### Describe the bug\n\nNuxt configures ssr to true, and then uses the project generated by nuxi generate. After the first screen is loaded, it is normal to navigate to the second-level or third-level page through routing. If you refresh the browser page, this time will cause Vue in the single-file component. The template template structure is inconsistent (the top-level class of the template in the component is inexplicably gone, and then the css variables and styles defined by other pages appear.).\r\nMay I ask how this is caused? How to solve it effectively?\r\nCurrently, client-only is used for all pages in app.vue to display normally.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3120,3121],{"name":3049,"color":3050},{"name":3039,"color":3040},20462,"Using the project generated by nuxi generate to refresh the template structure error problem twice","2023-04-25T05:49:03Z","https://github.com/nuxt/nuxt/issues/20462",0.68860734,{"description":3128,"labels":3129,"number":3135,"owner":3028,"repository":3029,"state":3053,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### Environment\n\nNuxt project info: (copied to clipboard) nuxi 8:34:52 pm\n\nOperating System: Linux\nNode Version: v22.17.1\nNuxt Version: 4.0.0\nCLI Version: 3.26.2\nNitro Version: 2.12.0\nPackage Manager: bun@1.2.15\nBuilder: -\nUser Config: modules, runtimeConfig, devtools, ui, css, colorMode, compatibilityDate, eslint\nRuntime Modules: @nuxt/ui@3.2.0, @nuxt/ui-pro@3.2.0, @pinia/nuxt@0.5.5, @nuxt/eslint@1.6.0\nBuild Modules: -\n👉 Report an issue: https://github.com/nuxt/nuxt/issues/new?template=bug-report.yml\n👉 Suggest an improvement: https://github.com/nuxt/nuxt/discussions/new\n👉 Read documentation: https://nuxt.com/\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nSee Nuxt UI official docs page -\nhttps://ui.nuxt.com/components/dashboard-sidebar\n\n### Description\n\nUI is not rendering correctly on the web page or on my local machine.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3130,3131,3134],{"name":3019,"color":3020},{"name":3132,"color":3133},"documentation","0075ca",{"name":3022,"color":3023},4610,"UI not rendering for certain Dashboard components","2025-07-29T21:07:34Z","https://github.com/nuxt/ui/issues/4610",0.68921655,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXhy3BQ5q5CHes9khKUdplv8i0iDICRhUKBVWjgvccAg":-1},"/nuxt/ui/4487"]