\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```",[2856,2859,2862],{"name":2857,"color":2858},"bug","d73a4a",{"name":2860,"color":2861},"v3","49DCB8",{"name":2863,"color":2864},"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":2874,"labels":2875,"number":2881,"owner":2866,"repository":2867,"state":2882,"title":2883,"updated_at":2884,"url":2885,"score":2886},"### 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_",[2876,2879,2880],{"name":2877,"color":2878},"enhancement","a2eeef",{"name":2860,"color":2861},{"name":2863,"color":2864},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":2888,"labels":2889,"number":2893,"owner":2866,"repository":2866,"state":2882,"title":2894,"updated_at":2895,"url":2896,"score":2897},"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```",[2890],{"name":2891,"color":2892},"3.x","29bc7f",15208,"Global transition with JS hooks","2023-01-19T17:46:14Z","https://github.com/nuxt/nuxt/issues/15208",0.70045984,{"description":2899,"labels":2900,"number":2904,"owner":2866,"repository":2867,"state":2882,"title":2905,"updated_at":2884,"url":2906,"score":2907},"### 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```",[2901,2902,2903],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},3911,"[NavigationMenu] Vertical menu with children doesn't respect parent Link attributes.","https://github.com/nuxt/ui/issues/3911",0.7043724,{"description":2909,"labels":2910,"number":2914,"owner":2866,"repository":2866,"state":2882,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### 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```",[2911],{"name":2912,"color":2913},"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.7045053,{"labels":2920,"number":2926,"owner":2866,"repository":2866,"state":2882,"title":2927,"updated_at":2928,"url":2929,"score":2930},[2921,2923],{"name":2877,"color":2922},"8DEF37",{"name":2924,"color":2925},"2.x","d4c5f9",6028,"Layout transitions (layoutTransition) javascript hooks","2024-06-14T16:10:02Z","https://github.com/nuxt/nuxt/issues/6028",0.70741016,{"description":2932,"labels":2933,"number":2935,"owner":2866,"repository":2866,"state":2882,"title":2936,"updated_at":2937,"url":2938,"score":2939},"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>",[2934],{"name":2924,"color":2925},34,"Routes transitions javascript hooks","2023-01-18T15:38:24Z","https://github.com/nuxt/nuxt/issues/34",0.70797336,{"description":2941,"labels":2942,"number":2944,"owner":2866,"repository":2866,"state":2882,"title":2945,"updated_at":2946,"url":2947,"score":2948},"Im having a **blog.vue** page where I animate my **posts** child components with nuxt-transition, more precisely with java hooks.\r\nmy code looks something like this\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv class=\"blog\">\r\n\t\t\u003Cpost/>\r\n \u003Cpost/>\r\n\t\t...\t\r\n\t\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n```\r\n\u003Cscript>\r\nimport card from '~/components/card.vue'\r\nexport default {\r\n\ttransition: {\r\n\t\tmode: 'out-in',\r\n\t\tcss: true,\r\n\t\tbeforeEnter(el) {{...}\t\r\n\t\tenter(el, done) {...}\r\n\t\tleave(el, done) {...}\r\n\t\r\n\t},\r\n}\r\n\u003C/script>\r\n```\r\n\r\nnow in my animation im targeting the child component post.vue and the animation works fine.\r\nUnfortunately my post.vue hover transition now doesn't work. I though this problem was because the transition css property, but after I change it css:true still it doesn't work. \r\nHow should i be able to have both animation ? The page transition and my hover transition.\r\n\r\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\r\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9003\">#c9003\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2943],{"name":2924,"color":2925},5472,"nuxt transition with java hooks, cant trigger css","2023-01-18T20:12:55Z","https://github.com/nuxt/nuxt/issues/5472",0.7132559,{"description":2950,"labels":2951,"number":2956,"owner":2866,"repository":2866,"state":2882,"title":2957,"updated_at":2958,"url":2959,"score":2960},"I've spent many hours to investigate the strange behavior in our large app.\r\nFinally I've found it, it seems so furious that I just have no idea what to do next with nuxt and with our templates among the whole application.\r\n\r\nAs usual, I created the separate repo with very simple code to demonstrate it: https://github.com/Kasheftin/nuxt-bug4.\r\nI'll show two bugs (alhough they may have one source).\r\n\r\nI suppose the reason is this component we use as a wrapper (everything else in the demo is hello world):\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"container\">\r\n \u003Cdiv class=\"col -menu\">\r\n \u003Cslot/>\r\n \u003C/div>\r\n \u003Cdiv class=\"col -content\">\r\n \u003Cnuxt-child/>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nIf the user goes to the index page, we show him menu column only using the index page that looks like:\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003CTwoColumns>\r\n MENU GOES HERE\r\n \u003C/TwoColumns>\r\n\u003C/template>\r\n```\r\n\r\nThen he follows the nested route and the target page placed into the nuxt-child of the wrapper.\r\n\r\n# The first bug:\r\n\r\n1. Follow the /a link. There's an input field with v-model, type anything and it appears just after the input.\r\n2. Follow /a/b link. Type something into the input field. It will work, but after every keypress nuxt show the progress bar at the top of the page like it load something. Although that's just simple inner component value update.\r\n\r\n# The second bug:\r\n\r\n3. Now follow /a/b/c link. Now only the first key press works. After that the data stops updating. It seems the component dies after the first key press. Although /b and /c are just nested nuxt-childs without javascript at all. And only the buggy progress bar at the top keeps working.\r\n\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/c1538\">#c1538\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2952,2955],{"name":2953,"color":2954},"documentation","5319e7",{"name":2924,"color":2925},1715,"Mix of slot and nuxt-child breaks everything","2023-01-18T15:42:10Z","https://github.com/nuxt/nuxt/issues/1715",0.7139234,{"description":2962,"labels":2963,"number":2965,"owner":2866,"repository":2866,"state":2882,"title":2966,"updated_at":2967,"url":2968,"score":2969},"I try to fix it but it seem not work at all.\r\n\r\nThe animation enter work perfectly fine.\r\n\r\nbut animation leave is not work.\r\n\r\nhow to solve this?\r\n\r\nThank you.\r\n\r\nI also read some issue in Vuejs github. Evan said since January that is a bug on Vuejs and I think he fixed it now. im not sure which version we using in Nuxtjs?\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/c1094\">#c1094\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2964],{"name":2924,"color":2925},1242,"Transition leave is a bug?","2023-01-18T15:41:00Z","https://github.com/nuxt/nuxt/issues/1242",0.71582264,["Reactive",2971],{},["Set"],["ShallowReactive",2974],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feBdTUI3dT9nu_ki8a0qr0NrvkLHnujHxCHDscz8vllY":-1},"/nuxt/ui/4254"]