",[3018,3021,3024],{"name":3019,"color":3020},"bug","d73a4a",{"name":3022,"color":3023},"v3","49DCB8",{"name":3025,"color":3026},"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.72113043,{"description":3036,"labels":3037,"number":3043,"owner":3028,"repository":3029,"state":3030,"title":3044,"updated_at":3045,"url":3046,"score":3047},"### 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```",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3041,"color":3042},"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.72599655,{"description":3049,"labels":3050,"number":3056,"owner":3028,"repository":3029,"state":3030,"title":3057,"updated_at":3058,"url":3059,"score":3060},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `devtools`, `extends`, `runtimeConfig`, `css`, `build`, `modules`, `piniaPluginPersistedstate`, `googleFonts`, `colorMode`, `site`, `robots`, `gtag`, `routeRules`, `icon`, `compatibilityDate`\n- Runtime Modules: `@nuxtjs/google-fonts@3.2.0`, `@nuxt/eslint@1.0.1`, `@vueuse/nuxt@12.7.0`, `@pinia/nuxt@0.10.1`, `pinia-plugin-persistedstate/nuxt@4.2.0`, `@nuxt/image@1.9.0`, `@nuxt/ui@2.21.0`, `nuxt-gtag@3.0.2`, `@nuxtjs/robots@5.2.2`, `@nuxtjs/sitemap@7.2.5`, `@nuxt/content@3.1.1`, `@nuxt/icon@1.10.3`\n- Build Modules: `-`\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.15.4\n\n### Reproduction\n\nI don't know how to reproduce this since it works in my local environment, however, this is the website: https://www.storysprout.me/\n\nI did try adding:\n```ts\n icon: {\n clientBundle: {\n scan: true,\n }\n },\n```\nto the `nuxt.config.ts` file, but that didn't help.\n\nI also installed the packages for the icons:\n\n```json\n \"dependencies\": {\n \"@iconify-json/fluent-emoji-high-contrast\": \"^1.2.3\",\n \"@iconify-json/heroicons\": \"^1.2.2\",\n }\n```\n\n### Description\n\nHi, \n\nSince I deployed to Vercel yesterday, I have encountered issues with the icons on my website.\n\nSome of them load correctly, while others do not work at all. I get a few console and network errors when loading the icons.\n\nFor example, I am using the component `UColorModeButton` and then I see this error:\n```\n[Icon] failed to load icon `heroicons:moon-20-solid`\n```\n\nIt happens similarly with other icons I have added for example when using the `items` prop to some of the other components like `UDropDown`.\n\nThe Network Error is a 404 on:\n`https://www.storysprout.me/api/_nuxt_icon/heroicons.json?icons=moon-20-solid`\n\nThank you!\n\n### Additional context\n\nI can provide any additional context if necessary.\n\n### Logs\n\n```shell-script\n\n```",[3051,3052,3053],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3054,"color":3055},"upstream","78bddb",3347,"failed to load icon `heroicons:moon-20-solid` on Vercel deployment","2025-03-14T03:47:25Z","https://github.com/nuxt/ui/issues/3347",0.77597195,{"description":3062,"labels":3063,"number":3064,"owner":3028,"repository":3065,"state":3030,"title":3066,"updated_at":3067,"url":3068,"score":3069},"In the current Nuxt 4 version (Nuxt nightly channel: 4.0.0-29092227.317ced76), the installed Nuxt Icon(v1.12.0) fails to start the Nuxt server properly.\n\n\n**Nitro Error**\n```\nRollupError: node_modules/@nuxt/icon/dist/runtime/server/api.js (6:9): \"useAppConfig\" is not exported by \"virtual:#imports\", imported by \"node_modules/@nuxt/icon/dist/runtime/server/api.js\".\n\n\n4: import { createError, getQuery } from \"h3\";\n5: import { consola } from \"consola\";\n6: import { useAppConfig, getRequestURL, defineCachedEventHandler } from \"#imports\";\n ^\n7: import { collections } from \"#nuxt-icon-server-bundle\";\n8: const warnOnceSet = /* @__PURE__ */ new Set();\n```\n\n\nnuxt.config.ts\n```ts\nexport default defineNuxtConfig({\n compatibilityDate: '2024-04-03',\n devtools: { enabled: false },\n\n modules: ['@nuxt/icon']\n})\n```\n\npackage.json\n```json\n{\n \"dependencies\": {\n \"@nuxt/icon\": \"^1.12.0\",\n \"nuxt\": \"npm:nuxt-nightly@latest\"\n }\n}\n```\n\n**Example**\nhttps://stackblitz.com/edit/nuxt-starter-ursfb2qu",[],390,"icon","Nuxt 4 RollupError","2025-04-25T05:33:30Z","https://github.com/nuxt/icon/issues/390",0.77676725,{"description":3071,"labels":3072,"number":3078,"owner":3028,"repository":3029,"state":3079,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.17.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.2.0, @nuxt/content@3.4.0, @vueuse/nuxt@13.0.0, @nuxt/image@1.10.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nTried to setup repo, but codesandbox was giving errors and stalling out.\n\n\n\n### Description\n\nWhen using the UDrawer component with `:dismissible=\"false\"` and `:modal=\"false\"`, the drawer still closes when users interact with elements outside the drawer. This prevents users from interacting with the form or other page elements while the drawer is open.\n\n**Steps to Reproduce**\nCreate a UDrawer component with :dismissible=\"false\"\nSet the drawer to be open\nTry to interact with form elements or other content outside the drawer\n\n### Additional context\n\nExpected Behavior\nAccording to the documentation at https://ui.nuxt.com/components/drawer#prevent-closing, setting dismissible=\"false\" should prevent the drawer from closing when clicking outside or pressing escape.\nActual Behavior\nThe drawer still closes when clicking outside, making it impossible to interact with form elements on the page while the drawer is open.\n\n```\n\u003CUDrawer\n v-model:open=\"showMobileResults\"\n direction=\"bottom\"\n :modal=\"false\"\n :handle=\"false\"\n :overlay=\"false\"\n dismissible=\"false\"\n title=\"Biological Age Results\"\n description=\"View your biological age and longevity estimates\"\n>\n \u003C!-- Drawer content here -->\n\u003C/UDrawer>\n```\n\n### Logs\n\n```shell-script\n\n```",[3073,3074,3077],{"name":3019,"color":3020},{"name":3075,"color":3076},"needs reproduction","CB47CF",{"name":3022,"color":3023},3727,"closed","UDrawer ignores :dismissible=\"false\" prop and still closes when interacting outside","2025-06-12T15:30:30Z","https://github.com/nuxt/ui/issues/3727",0.73723745,{"description":3085,"labels":3086,"number":3095,"owner":3028,"repository":3029,"state":3079,"title":3096,"updated_at":3097,"url":3098,"score":3099},"### Environment\n\nnode22, nuxtui300-b3 and nuxt3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv.3.0.0-beta3\n\n### Reproduction\n\nYou can reproduce from the components page for modal and drawer. Open the drawer, the bottom drawer appears, and rest of page shifts from removal of scrollbar. Same does not occur on the modal component.\n\n### Description\n\nThe modal component properly handles overflow and prevents shifting of the main page layout when open. The drawer component does not. Would like to see the drawer prevent layout shift from the scroll bar removal, like is done on the modals. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3087,3088,3089,3090,3093],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3041,"color":3042},{"name":3091,"color":3092},"closed-by-bot","ededed",{"name":3094,"color":3092},"stale",3523,"Drawer shifts layout unlike modal","2025-06-18T09:01:40Z","https://github.com/nuxt/ui/issues/3523",0.75070894,{"description":3101,"labels":3102,"number":3108,"owner":3028,"repository":3029,"state":3079,"title":3109,"updated_at":3110,"url":3111,"score":3112},"### Environment\n\nTested on latest macOS\n\"@nuxt/ui\": \"3.0.0-alpha.13\",\n\"nuxt\": \"^3.15.4\"\n\"packageManager\": \"pnpm@10.5.0\"\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.15.4\n\n### Reproduction\n\nCreate a new project using nuxt UI starter using :\n`npx nuxi init -t ui3 \u003Cmy-app>`\n\n### Description\n\nCreate a new project using nuxt UI starter usiing :\n`npx nuxi init -t ui3 \u003Cmy-app>`\n\nAll tailwind classes used in templates of the project vue files are properly picked up by tailwind.\nHowever, tailwind classes use by nuxt/ui components are picked up by tailwind.\n\nIn this div of app/pages/index.vue file, 'gap-2' 'item-center' classes are properly available :\n\u003Cimg width=\"845\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b87c2ddd-69b1-4be7-9ec3-cc322d8fa1db\" />\n\nBut UButton compenent classes ('font-medium' 'inline-flex'...) are not availble :\n\u003Cimg width=\"901\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3b5c21cb-b1ba-48f4-805a-c9fccd8573b2\" />\n\nWhich result in the folowing :\n\u003Cimg width=\"283\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/294a3a0c-fea0-4bfd-ad73-2e3d6e80fdae\" />\n\n### Additional context\n\ntested with pnpm\n\n### Logs\n\n```shell-script\nNo error logged in the console\n```",[3103,3104,3107],{"name":3019,"color":3020},{"name":3105,"color":3106},"duplicate","cfd3d7",{"name":3022,"color":3023},3402,"NuxtUI component classes not picked up by tailwind","2025-02-26T10:03:21Z","https://github.com/nuxt/ui/issues/3402",0.7571377,{"description":3114,"labels":3115,"number":3119,"owner":3028,"repository":3120,"state":3079,"title":3121,"updated_at":3122,"url":3123,"score":3124},"Hello, thanks for open-sourcing this repo. I'm exploring the app. \r\n\r\nI would like to understand why pathPrefix is not getting applied to components within the folder `~/components/content`? Is this a convention that's undocumented? Thanks. \r\n\r\n\r\n",[3116],{"name":3117,"color":3118},"question","ff1ab2",1418,"nuxt.com","Understanding why pathPrefix not set for components/content ","2023-11-21T10:07:33Z","https://github.com/nuxt/nuxt.com/issues/1418",0.76186097,{"description":3126,"labels":3127,"number":3130,"owner":3028,"repository":3029,"state":3079,"title":3131,"updated_at":3132,"url":3133,"score":3134},"",[3128,3129],{"name":3019,"color":3020},{"name":3022,"color":3023},2338,"[Tabs] Height shifts of 1px between `pill` and `link` variants","2024-10-28T09:49:02Z","https://github.com/nuxt/ui/issues/2338",0.7640973,{"description":3136,"labels":3137,"number":3141,"owner":3028,"repository":3029,"state":3079,"title":3142,"updated_at":3143,"url":3144,"score":3145},"### Description\n\nHello everyone,\n\nI am using a drawer like this:\n\n```\nconst onViewDetails = () => {\n const drawer = overlay.create(TaskOverlay)\n\n drawer.open({\n project: props.project\n })\n}\n```\n\nNow the problem is that I am using an event bus that is being used inside the onMounted() method: \n\n```\nonMounted(() => {\n $listen('task:updated', (taskId: string) => {\n console.log(\"Test\")\n refresh()\n })\n})\n```\n\nNow the question is: How can I unmount the drawer if it is closed? Once opened, the refresh event will be triggered, event if the drawer has been closed already.\n\nAny idea how I could handle this?",[3138,3140],{"name":3117,"color":3139},"d876e3",{"name":3022,"color":3023},3828,"Drawer is not unmounted when closed","2025-05-01T18:11:37Z","https://github.com/nuxt/ui/issues/3828",0.7665263,["Reactive",3147],{},["Set"],["ShallowReactive",3150],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fKXaygfKoGR5Nk46KwfYgow3IajLhJidzUsutz2ccNck":-1},"/nuxt/ui/4546"]