",[2904,2907,2910],{"name":2905,"color":2906},"bug","d73a4a",{"name":2908,"color":2909},"v3","49DCB8",{"name":2911,"color":2912},"reka-ui","56d799",3947,"nuxt","ui","open","Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)","2025-06-05T10:38:05Z","https://github.com/nuxt/ui/issues/3947",0.6740424,{"description":2922,"labels":2923,"number":2929,"owner":2914,"repository":2915,"state":2916,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.25.0\n- Nitro Version: 2.11.9\n- Package Manager: pnpm@9.15.5\n- Builder: -\n- User Config: modules, security, routeRules, ui, colorMode, icon, app, devtools, css, vite, content, image, ssr, future, compatibilityDate, components\n- Runtime Modules: @nuxt/content@3.5.1, @nuxt/ui@3.1.0, @nuxt/image@1.10.0, @pinia/nuxt@0.10.1, nuxt-security@2.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\nNuxt UI\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nYou can actually see the issue right on Nuxt UI's demo page:\nhttps://ui.nuxt.com/components/drawer#inset\n\nAs an inset drawer closes, watch the viewport edge and notice the drawer doesn't fully animate offscreen.\n\nAfter the drawer close animation completes, the drawer is still actually visible for a moment before finally disappearing. It animated fully, yes, but the animation doesn't take into account the extra distance needed because of `inset`. I think it's easy to miss this subtle thing on the demos page, however in my custom theme, the background and drawer have high-contrast, so the jankyness is noticeable.\n\n### Description\n\nGiven a Nuxt UI drawer instance with the `inset` option...\n\n**Issue:** \nWhen closing an inset drawer, the drawer does not animate fully off the screen. Instead, the drawer animates to zero **but is still visible for a moment before ultimately disappearing**.\n\n```\n\u003CUDrawer id=\"myDrawer\"\nv-model:open=\"store.myDrawer\"\ndirection=\"top\"\ninset\nclass=\"myDrawer\">\n \u003Ctemplate #content>\n \u003Cdiv class=\"p-4 min-h-32 flex flex-col gap-4 overflow-hidden\">\n \u003CSomeComponent />\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```",[2924,2925,2926],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2927,"color":2928},"triage","ffffff",3985,"Drawer-with-inset doesn't fully animate to edge of viewport","2025-05-03T13:53:51Z","https://github.com/nuxt/ui/issues/3985",0.67910254,{"description":2935,"labels":2936,"number":2947,"owner":2914,"repository":2914,"state":2916,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.16.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: pnpm@8.7.6\r\n- Builder: -\r\n- User Config: app\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/busy-shadow-3vll5z?file=%2Fnuxt.config.ts%3A8%2C1\n\n### Describe the bug\n\nAfter applying `app.layoutTransition` and `app.pageTransition`, the scroll bar doesn't return to the top when the layout changes.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2937,2940,2941,2944],{"name":2938,"color":2939},"good first issue","fbca04",{"name":2905,"color":2906},{"name":2942,"color":2943},"pages","00DFB5",{"name":2945,"color":2946},"🔨 p3-minor","FBCA04",23593,"When the layout changes, it doesn't scroll back to the top.","2024-11-19T16:20:56Z","https://github.com/nuxt/nuxt/issues/23593",0.70522505,{"description":2953,"labels":2954,"number":2958,"owner":2914,"repository":2914,"state":2916,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, app\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-psf3p3\n\n### Describe the bug\n\nWhen navigating between two routes with different layouts, if a pageTransition is set in the Nuxt config and one of the page has a some async logic, the slot of the layout will not be rendered where it is supposed to be.\r\n\r\nIn my reproduction, the content of the page is rendering after the footer. It might take several back and forth between the homepage and the about page to get the bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2955],{"name":2956,"color":2957},"pending triage","E99695",25685,"Changing layout with a pageTransition and some async logic breaks the layout","2024-06-30T11:05:52Z","https://github.com/nuxt/nuxt/issues/25685",0.72368944,{"description":2964,"labels":2965,"number":2976,"owner":2914,"repository":2915,"state":2977,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Description\n\nIf I open one of these 3 (modal, sidebar, dropdown) nuxt ui is adding styles to the body which cause strange layout behaviors.\nI would like to costumize these or modify. Thats what currently gets added when opening a modal and causes problems\n```\n\u003Cbody style=\"padding-right: 9px; margin-right: 0px; --scrollbar-width: 9px; overflow: hidden; pointer-events: none;\">\n```\n\nIs there a way to do that right now?",[2966,2969,2970,2971,2974],{"name":2967,"color":2968},"question","d876e3",{"name":2908,"color":2909},{"name":2911,"color":2912},{"name":2972,"color":2973},"closed-by-bot","ededed",{"name":2975,"color":2973},"stale",3078,"closed","Scrolllock when opening modal, dropdown, sidebar","2025-06-18T09:02:37Z","https://github.com/nuxt/ui/issues/3078",0.6870388,{"description":2983,"labels":2984,"number":2990,"owner":2914,"repository":2915,"state":2977,"title":2991,"updated_at":2992,"url":2993,"score":2994},"### Environment\n\nOperating System: Windows 11\nNode Version: v22.14.0\nNuxt Version: 3.17.4\nNitro Version: 2.11.12\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/unruffled-frog-pz7l74\n\n### Description\n\nHi,\nI'm experiencing an issue with the UDashboardSidebar component when using it in a right-to-left (RTL) layout. While resizing, the drag direction appears to be inverted—it moves in the opposite direction of the cursor.\n\nI've made an example project.\n\nCould you please look into this and let me know if there's a fix or workaround? I'm currently using Nuxt UI Pro in development.\n\nThanks a lot!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2985,2986,2987],{"name":2905,"color":2906},{"name":2908,"color":2909},{"name":2988,"color":2989},"nuxt/ui-pro","00dc82",4293,"UDashboardSidebar Resize Drag Direction Reversed in RTL theme","2025-07-02T11:44:08Z","https://github.com/nuxt/ui/issues/4293",0.6900372,{"description":2996,"labels":2997,"number":3004,"owner":2914,"repository":2915,"state":2977,"title":3005,"updated_at":3006,"url":3007,"score":3008},"### Environment\n\n- Nuxt Vesrion: '3.15.1'\n- Nuxt/ui Version: '3.0.1'\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.1\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/pull/2251\n\n### Description\n\nThis issue was previously addressed and fixed in [PR #2251](https://github.com/nuxt/ui/pull/2251). However, after upgrading to Nuxt UI v3.0.1, the dir prop no longer exists, making it impossible to switch the direction of the Carousel.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2998,2999,3002,3003],{"name":2905,"color":2906},{"name":3000,"color":3001},"needs reproduction","CB47CF",{"name":2908,"color":2909},{"name":2972,"color":2973},3705,"Missing \"dir\" Prop in Carousel Component After Nuxt UI v3.0.1 Update","2025-05-31T02:09:01Z","https://github.com/nuxt/ui/issues/3705",0.6956634,{"description":3010,"labels":3011,"number":3014,"owner":2914,"repository":2915,"state":2977,"title":3015,"updated_at":3016,"url":3017,"score":3018},"### Environment\n\n- Operating System: Darwin\n- Node Version: v18.20.6\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: yarn@1.22.22\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.13\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-agnesi-drlrh4?file=%2Fapp%2Fpages%2Findex.vue%3A24%2C24\n\n### Description\n\nWhen I close a `UDrawer` that I opened via an action from a `UDropdownMenu`, the style on my \u003Cbody> tag still contains `overflow: hidden` and `user-select: none`, which prevents interaction with the page.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3012,3013],{"name":2905,"color":2906},{"name":2908,"color":2909},3406,"User interaction lock after a Drawer/DropdownMenu","2025-02-27T20:57:27Z","https://github.com/nuxt/ui/issues/3406",0.70341605,{"description":3020,"labels":3021,"number":3026,"owner":2914,"repository":2914,"state":2977,"title":3027,"updated_at":3028,"url":3029,"score":3030},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, ssr, app, css\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-njpvcp\n\n### Describe the bug\n\nThe following is a very common application layout(also shown in layouts/default.vue in the reproduction link):\r\n```\r\n\u003CHeader />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n\u003CFooter />\r\n```\r\nWhen we use 'out-in' mode in pageTransition in nuxt.config.ts:\r\n```\r\npageTransition: { name: 'page', mode: 'out-in' }\r\n```\r\nAnd we **CLICK ON THE LINK** . This is what's rendered in the DOM.\r\n```\r\n\u003CHeader />\r\n\u003CFooter />\r\n\u003Cslot /> \u003C!-- References to the page -->\r\n```\r\nAlso when we use the following layout:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n \u003Cp>More Content\u003C/p>\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nThis is the result in the DOM, after the link is clicked:\r\n```\r\n\u003CHeader />\r\n\u003Cdiv>\r\n \u003Cp>More Content\u003C/p>\r\n \u003Cslot /> \u003C!-- References to the page -->\r\n\u003C/div>\r\n\u003CFooter />\r\n```\r\nNuxt v3 it seems that append the slot at the end of the parent element. Which seems a bug to me. Looks like there needs to be a handling in appending the slot in the correct order.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3022,3025],{"name":3023,"color":3024},"3.x","29bc7f",{"name":2956,"color":2957},25739,"Slot position gets shifted when using the out-in page transition","2024-02-11T09:36:25Z","https://github.com/nuxt/nuxt/issues/25739",0.7041723,{"description":3032,"labels":3033,"number":3040,"owner":2914,"repository":2914,"state":2977,"title":3041,"updated_at":3042,"url":3043,"score":3044},"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>",[3034,3037],{"name":3035,"color":3036},"documentation","5319e7",{"name":3038,"color":3039},"2.x","d4c5f9",1715,"Mix of slot and nuxt-child breaks everything","2023-01-18T15:42:10Z","https://github.com/nuxt/nuxt/issues/1715",0.71229583,["Reactive",3046],{},["Set"],["ShallowReactive",3049],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fVNNAuZ8Pmm03F3_A-mg482GMILHyT7ua46Kfnio3CkM":-1},"/nuxt/ui/3523"]