\n \u003C/div>\n \u003C/template>\n\u003C/UDrawer>\n```\n\n**Current workaround:**\n\nThis solves it for me, however doesn't take into account other cases.\n\nFor the closed state of my drawer-with-inset, I force `top` to `0`.\n```\n.myDrawer[data-state='closed'] {\n top: calc(var(--spacing) * 0);\n}\n```\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",3985,"nuxt","ui","open","Drawer-with-inset doesn't fully animate to edge of viewport","2025-05-03T13:53:51Z","https://github.com/nuxt/ui/issues/3985",0.7210364,{"description":3036,"labels":3037,"number":3043,"owner":3028,"repository":3029,"state":3044,"title":3045,"updated_at":3046,"url":3047,"score":3048},"### Description\n\nIs there any chance we can get option to enable/disable collapsible when collapsed prop is true. v3.0.0-alpha.13 'fixed' NavigationMenu: disable collapsible with collapsed prop, i used nuxt ui since v3.0.0-alpha.12 and thought the collapsible when collapsed was feature.\n\n### Additional context\n\n_No response_",[3038,3041,3042],{"name":3039,"color":3040},"enhancement","a2eeef",{"name":3022,"color":3023},{"name":3025,"color":3026},3353,"closed","NavigationMenu: Option to enable collapsible with collapsed prop","2025-05-10T15:51:54Z","https://github.com/nuxt/ui/issues/3353",0.6899822,{"description":3050,"labels":3051,"number":3055,"owner":3028,"repository":3028,"state":3044,"title":3056,"updated_at":3057,"url":3058,"score":3059},"Hello 👋,\r\n\r\nI am trying to port my \"vue syntax transition\" to a more \"nuxt friendly\" solution. For now I have :\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst onBeforeLeave = (el) => {}\r\nconst onLeaver = (el, done) => {}\r\nconst onEnter = (el, done) => {}\r\nconst onAfterEnter = (el) => {}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Crouter-view v-slot=\"{ Component }\">\r\n \u003CTransition\r\n mode=\"out-in\"\r\n :css=\"false\"\r\n @before-leave=\"onBeforeLeave\"\r\n @leave=\"onLeave\"\r\n @enter=\"onEnter\"\r\n @after-enter=\"onAfterEnter\"\r\n >\r\n \u003Ccomponent :is=\"Component\" />\r\n \u003C/Transition>\r\n \u003C/router-view>\r\n\u003C/template>\r\n```\r\n\r\nthat is working quite well. however, the following config coming from [the doc](https://v3.nuxtjs.org/getting-started/transitions#javascript-hooks) doesn't seems to work in `app.vue`:\r\n\r\n```js\r\n\u003Cscript setup lang=\"ts\">\r\ndefinePageMeta({\r\n pageTransition: {\r\n name: 'custom-flip',\r\n mode: 'out-in',\r\n onBeforeEnter: (el) => {\r\n console.log('Before enter...')\r\n },\r\n onEnter: (el, done) => {},\r\n onAfterEnter: (el) => {}\r\n }\r\n})\r\n\u003C/script>\r\n```",[3052],{"name":3053,"color":3054},"3.x","29bc7f",15208,"Global transition with JS hooks","2023-01-19T17:46:14Z","https://github.com/nuxt/nuxt/issues/15208",0.70045984,{"description":3061,"labels":3062,"number":3066,"owner":3028,"repository":3029,"state":3044,"title":3067,"updated_at":3046,"url":3068,"score":3069},"### Environment\n\n\n\n- Operating System: Darwin\n- Node Version: v23.9.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, components, css, devServer, ssr, vuefire, runtimeConfig\n- Runtime Modules: @nuxt/image@1.10.0, @nuxt/ui-pro@3.0.2, nuxt-vuefire@1.0.5\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nThis is noticeable on the documentation [page](https://ui.nuxt.com/components/navigation-menu#orientation) for any vertical navigation menu with children navigation items. \n\n### Description\n\nThe parent item renders as a `\u003Cbutton>` tag instead of the `\u003Ca>` tags of other navigation menu items. This means the `to:` attribute is ignored (and target) and can't be clicked on. This is likely due to the parent and children being converted to a Collapsible component under the hood. \n\nWhen the orientation is horizontal, however, you can have both the parent and children be links - where they render `\u003Ca>` tags. Hovering over the horizontal parent shows the children, but the parent can still be a link.\n\nIdeally, we could set a boolean to control whether the children are converted to a Collapsible or not. Or wrap the Collapsible parent around a link. Understandably, the click then couldn't trigger opening/closing the collapsible (maybe the icon triggers opening/closing, while the label can still have the Link attributes available).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3063,3064,3065],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},3911,"[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","https://github.com/nuxt/ui/issues/3911",0.7043724,{"description":3071,"labels":3072,"number":3076,"owner":3028,"repository":3028,"state":3044,"title":3077,"updated_at":3078,"url":3079,"score":3080},"### Environment\n\nNuxt project info: \n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.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\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-87qe6yfc?file=layouts%2Fdefault.vue\n\n### Describe the bug\n\nWrapping the `\u003Cslot />` with a `Transition` in a layout results in a `non-element root node` error.\n\n**Layout:** \n```vue\n\u003Ctemplate>\n \u003Cdiv class=\"flex\">\n \u003CNavbar />\n \u003Cdiv class=\"my-ml\">\n \u003CTransition name=\"fade\" mode=\"out-in\"> \u003C!--- from here --->\n \u003Cslot /> \n \u003C/Transition> \u003C!--- to here --->\n \u003C/div>\n \u003C/div>\n\u003C/template>\n\n```\n\n**Page:** \n```vue\n\u003Ctemplate>\n \u003Cdiv class=\"border\">Single node slot\u003C/div> \u003C!--- root node is single --->\n\u003C/template>\n```\n\n**Error:**\n```error\nruntime-core.esm-bundler.js:51 \n[Vue warn]: Component inside \u003CTransition> renders non-element root node that cannot be animated. \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage key=\"_default0\" > \n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \n at \u003CTransition name=\"fade\" mode=\"out-in\" > \n at \u003CDefault ref=Ref\u003C Proxy(Object) > > \n at \u003CAsyncComponentWrapper ref=Ref\u003C Proxy(Object) > > \n at \u003CLayoutLoader key=\"default\" layoutProps= Object name=\"default\" > \n at \u003CNuxtLayoutProvider layoutProps= Object key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\n### Additional context\n\nI want keep the navbar steady and animate only the content of the page on the right with a nice fade.\n\n### Logs\n\n```shell-script\n\n```",[3073],{"name":3074,"color":3075},"pending triage","E99695",30969,"Transition do not work around slot in layout","2025-02-22T20:06:51Z","https://github.com/nuxt/nuxt/issues/30969",0.70450526,{"labels":3082,"number":3088,"owner":3028,"repository":3028,"state":3044,"title":3089,"updated_at":3090,"url":3091,"score":3092},[3083,3085],{"name":3039,"color":3084},"8DEF37",{"name":3086,"color":3087},"2.x","d4c5f9",6028,"Layout transitions (layoutTransition) javascript hooks","2024-06-14T16:10:02Z","https://github.com/nuxt/nuxt/issues/6028",0.70741016,{"description":3094,"labels":3095,"number":3097,"owner":3028,"repository":3028,"state":3044,"title":3098,"updated_at":3099,"url":3100,"score":3101},"Any way to add the javascript hooks to the `\u003Ctransition>`? \r\n\r\n```\r\n\u003Ctransition\r\n v-on:before-enter=\"beforeEnter\"\r\n v-on:enter=\"enter\"\r\n v-on:after-enter=\"afterEnter\"\r\n v-on:enter-cancelled=\"enterCancelled\"\r\n v-on:before-leave=\"beforeLeave\"\r\n v-on:leave=\"leave\"\r\n v-on:after-leave=\"afterLeave\"\r\n v-on:leave-cancelled=\"leaveCancelled\"\r\n>\r\n \u003C!-- ... -->\r\n\u003C/transition>\r\n```\r\nMaybe we could simply add `transition: { hooks: true }` as a viable option in nuxt-config? And then add the same as above into `\u003Ctransition>` (seems overkill to be able to name the hooks yourself).\r\n\r\nThing to watch out for though:\r\n```\r\nIt’s also a good idea to explicitly add v-bind:css=\"false\" for JavaScript-only transitions so that Vue can skip the CSS detection. This also prevents CSS rules from accidentally interfering with the transition.\r\n```\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This feature request is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c27\">#c27\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3096],{"name":3086,"color":3087},34,"Routes transitions javascript hooks","2023-01-18T15:38:24Z","https://github.com/nuxt/nuxt/issues/34",0.70797336,{"description":3103,"labels":3104,"number":3108,"owner":3028,"repository":3029,"state":3044,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.13.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: modules, devtools, supabase, runtimeConfig, security, css, uiPro, routeRules, future, compatibilityDate, nitro, content, eslint\n- Runtime Modules: @nuxt/eslint@1.4.1, @nuxt/image@1.10.0, @nuxt/ui-pro@3.1.3, @nuxt/content@3.6.0, @vueuse/nuxt@13.4.0, nuxt-og-image@5.1.7, @nuxtjs/supabase@1.5.2, nuxt-security@2.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\n## Steps to Reproduce:\n1. Load the StackBlitz demo: https://stackblitz.com/edit/nuxtui-carousel-fade-bug\n2. Click the tabs on the carousel - notice the smooth fade transitions ✅\n3. Navigate to \"Page 2\" using the button\n4. Try clicking tabs on either page - fade transitions no longer work ❌\n5. The carousel now uses slide animations instead of fade\n\n### Description\n\nI noticed that when using page transitions, the `fade` property of the `\u003CUCarousel>` component stops working after navigating between pages. The carousel reverts to slide animations instead of fade transitions. Removing the page transitions restores correct functionality.\n\nI looked into it with the help of Claude and found the bug was caused by VueUse's computedAsync failing during page transitions in Nuxt. I will open a PR to fix this issue!\n\n### Additional context\n\n## Expected Behavior:\nCarousel fade transitions should continue working after page navigation with transitions.\n\n## Actual Behavior:\nCarousel fade transitions stop working and revert to slide animations after navigating between pages that have `pageTransition` configured.\n\n## Workaround:\nRemoving `pageTransition` from `definePageMeta()` restores fade functionality even after navigation.\n\n\n### Logs\n\n```shell-script\n\n```",[3105,3106,3107],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4379,"UCarousel fade transitions break after page navigation with pageTransition","2025-06-30T12:55:09Z","https://github.com/nuxt/ui/issues/4379",0.71047324,{"description":3114,"labels":3115,"number":3119,"owner":3028,"repository":3029,"state":3044,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### 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>",[3116,3117,3118],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},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.71142787,{"description":3125,"labels":3126,"number":3130,"owner":3028,"repository":3029,"state":3044,"title":3131,"updated_at":3132,"url":3133,"score":3134},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future, css\n- Runtime Modules: @nuxt/ui@3.1.3\n- Build Modules: -\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/admiring-firefly-pw9d9p\n\n### Description\n\nUsing a vertical orientation along with `type=\"single\"`, if there is only one level of children, works great. Clicking on another item to select causes the current item to collapse and new one expands.\n\nWhen you have more nested levels though, clicking on child items bubbles up and closes all parents up to top.\n\nI've added two `UNavigationMenu` items, the first one has one level and works fine, the seconds one is where the issue is demonstrated.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3127,3128,3129],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4329,"`UNavigationMenu` nested accordions close all levels when `type=\"single\"`","2025-06-17T08:49:09Z","https://github.com/nuxt/ui/issues/4329",0.7128663,["Reactive",3136],{},["Set"],["ShallowReactive",3139],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feBdTUI3dT9nu_ki8a0qr0NrvkLHnujHxCHDscz8vllY":-1},"/nuxt/ui/4254"]