\n \u003C/UFormField>\n\n \u003CUFormField label=\"File\" name=\"file\">\n \u003CUInput type=\"file\" />\n \u003C/UFormField>\n\n \u003CUButton type=\"submit\"> Submit \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```",[3019,3022],{"name":3020,"color":3021},"question","d876e3",{"name":3023,"color":3024},"v3","49DCB8",4637,"nuxt","ui","open","File field gets cleared, bug?","2025-07-31T09:13:25Z","https://github.com/nuxt/ui/issues/4637",0.71882623,{"description":3034,"labels":3035,"number":3039,"owner":3026,"repository":3026,"state":3028,"title":3040,"updated_at":3041,"url":3042,"score":3043},"### Describe the feature\n\nAdd documentation for Nuxt Components \n\n\n\n\nComparison between Vue template Component and Nuxt Layout Component, there is no documentation for hovering over the element unlike others\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [x] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3036],{"name":3037,"color":3038},"pending triage","E99695",32330,"Better IDE Docs","2025-06-08T03:26:08Z","https://github.com/nuxt/nuxt/issues/32330",0.74418736,{"description":3045,"labels":3046,"number":3059,"owner":3026,"repository":3027,"state":3060,"title":3061,"updated_at":3062,"url":3063,"score":3064},"### Environment\n\n- Operating System: `Windows 11`\n- Browser: `Chrome 131`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt UI\n\n### Version\n\nv2.20.0, 3.0.0-alpha-x\n\n### Reproduction\n\n[Tabs ](https://ui.nuxt.com/components/tabs) and [Input#disabled](https://ui.nuxt.com/components/input#disabled) sections of ui.nuxt.com, as well as pretty much every other component that has a \"Disabled\" state, demonstrate the issue\n\n### Description\n\nThe current styling for `disabled` state of different components in Nuxt UI has a very subtle visual distinction from the enabled state. On a monitor with good sRGB calibration (Gigabyte M32U - IPS, 4K, sRGB mode), the grayed-out appearance of the `disabled` state in almost every Nuxt UI component (as shown on the [ui.nuxt.com/components](https://ui.nuxt.com/components)) is almost indistinguishable from the non-disabled state.\n\n**Issue:**\n- Disabled elements do not provide a clear visual cue, making it hard for users to differentiate their state at a glance.\n- This affects usability and accessibility, especially for users with mild visual impairments or varying screen settings.\n\n**Suggestion:**\n\nConsider increasing contrast differences or adding clearer indicators (e.g., opacity) to improve visual accessibility for disabled elements.\n\n**Example:**\n[Tabs](https://ui.nuxt.com/components/tabs) and [Input#disabled](https://ui.nuxt.com/components/input#disabled) sections of ui.nuxt.com, as well as pretty much every other component that has a \"Disabled\" state, demonstrate the issue.\n\n**Video** (may look different on your monitor):\nNuxt UI `2.20.0`:\n\n\nhttps://github.com/user-attachments/assets/81eea3ee-1c74-4036-9fe9-55b18cb16851\n\n\nNuxt UI `3.0.0-alpha-x`:\n\n\nhttps://github.com/user-attachments/assets/9018589e-98fb-46d1-97e5-623fae98727e\n\n\n**Photos** of how it looks like on the mentioned monitor:\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/97736e43-fe88-428a-b3b2-67fcbe9b37dc\" width=\"400\"/>\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/6caf4ee6-0cb9-4c7e-9bc7-07e320248b8e\" width=\"400\"/>\n\n\u003Cimg src=\"https://github.com/user-attachments/assets/b64d9960-4877-4fc4-b016-92ce8c4cf393\" width=\"400\"/>\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3047,3050,3051,3054,3057],{"name":3048,"color":3049},"bug","d73a4a",{"name":3023,"color":3024},{"name":3052,"color":3053},"triage","ffffff",{"name":3055,"color":3056},"closed-by-bot","ededed",{"name":3058,"color":3056},"stale",2995,"closed","Improve disabled state visibility for Tabs and other components","2025-06-18T09:02:44Z","https://github.com/nuxt/ui/issues/2995",0.71987194,{"description":3066,"labels":3067,"number":3073,"owner":3026,"repository":3027,"state":3060,"title":3074,"updated_at":3075,"url":3076,"score":3077},"### Environment\n\n```\n System:\n OS: macOS 15.5\n CPU: (14) arm64 Apple M3 Max\n Memory: 555.83 MB / 36.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 23.11.0 - /opt/homebrew/bin/node\n Yarn: 1.22.22 - /opt/homebrew/bin/yarn\n npm: 10.9.2 - /opt/homebrew/bin/npm\n pnpm: 9.12.3 - /opt/homebrew/bin/pnpm\n Watchman: 2025.04.28.00 - /opt/homebrew/bin/watchman\n npmPackages:\n nuxt: ^3.17.3 => 3.17.4 \n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.17.4\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nWhen using the UNavigationMenu component from Nuxt UI 3 in a fresh Nuxt 3 app, the following warning appears in the browser console:\n\n```shell-script\n> [Vue warn] toRefs() expects a reactive object but received a plain one.\n```\n\nThis occurs even when rendering the component barebones:\n\n**pages/index.vue:**\n\n```vue\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\nconst items = ref\u003CNavigationMenuItem[]>([\n {\n label: 'Guide',\n icon: 'i-lucide-book-open',\n to: '/getting-started',\n children: [\n {\n label: 'Introduction',\n description: 'Fully styled and customizable components for Nuxt.',\n icon: 'i-lucide-house'\n },\n {\n label: 'Installation',\n description: 'Learn how to install and configure Nuxt UI in your application.',\n icon: 'i-lucide-cloud-download'\n },\n {\n label: 'Icons',\n icon: 'i-lucide-smile',\n description: 'You have nothing to do, @nuxt/icon will handle it automatically.'\n },\n {\n label: 'Colors',\n icon: 'i-lucide-swatch-book',\n description: 'Choose a primary and a neutral color from your Tailwind CSS theme.'\n },\n {\n label: 'Theme',\n icon: 'i-lucide-cog',\n description: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'\n }\n ]\n },\n {\n label: 'Composables',\n icon: 'i-lucide-database',\n to: '/composables',\n children: [\n {\n label: 'defineShortcuts',\n icon: 'i-lucide-file-text',\n description: 'Define shortcuts for your application.',\n to: '/composables/define-shortcuts'\n },\n {\n label: 'useOverlay',\n icon: 'i-lucide-file-text',\n description: 'Display a modal/slideover within your application.',\n to: '/composables/use-overlay'\n },\n {\n label: 'useToast',\n icon: 'i-lucide-file-text',\n description: 'Display a toast within your application.',\n to: '/composables/use-toast'\n }\n ]\n },\n {\n label: 'Components',\n icon: 'i-lucide-box',\n to: '/components',\n active: true,\n children: [\n {\n label: 'Link',\n icon: 'i-lucide-file-text',\n description: 'Use NuxtLink with superpowers.',\n to: '/components/link'\n },\n {\n label: 'Modal',\n icon: 'i-lucide-file-text',\n description: 'Display a modal within your application.',\n to: '/components/modal'\n },\n {\n label: 'NavigationMenu',\n icon: 'i-lucide-file-text',\n description: 'Display a list of links.',\n to: '/components/navigation-menu'\n },\n {\n label: 'Pagination',\n icon: 'i-lucide-file-text',\n description: 'Display a list of pages.',\n to: '/components/pagination'\n },\n {\n label: 'Popover',\n icon: 'i-lucide-file-text',\n description: 'Display a non-modal dialog that floats around a trigger element.',\n to: '/components/popover'\n },\n {\n label: 'Progress',\n icon: 'i-lucide-file-text',\n description: 'Show a horizontal bar to indicate task progression.',\n to: '/components/progress'\n }\n ]\n },\n {\n label: 'GitHub',\n icon: 'i-simple-icons-github',\n badge: '3.8k',\n to: 'https://github.com/nuxt/ui',\n target: '_blank'\n },\n {\n label: 'Help',\n icon: 'i-lucide-circle-help',\n disabled: true\n }\n])\n\u003C/script>\n\u003Ctemplate>\n \u003CUNavigationMenu :items=\"items\" class=\"w-full justify-center\" />\n\u003C/template>\n\n```\n\n**Minimal Reproduction**\nRepro created using Nuxt 3 + Nuxt UI 3 starter structure.\n\npackage.json:\n```json\n{\n \"name\": \"nuxt-app\",\n \"private\": true,\n \"type\": \"module\",\n \"scripts\": {\n \"build\": \"nuxt build\",\n \"dev\": \"nuxt dev\",\n \"generate\": \"nuxt generate\",\n \"preview\": \"nuxt preview\",\n \"postinstall\": \"nuxt prepare\",\n \"lint\": \"eslint .\",\n \"lint:fix\": \"eslint --fix .\"\n },\n \"dependencies\": {\n \"@iconify-json/lucide\": \"^1.2.44\",\n \"@iconify-json/simple-icons\": \"^1.2.35\",\n \"@nuxt/ui\": \"^3.1.1\",\n \"nuxt\": \"^3.17.3\"\n },\n \"devDependencies\": {\n \"@nuxt/eslint\": \"^1.4.1\",\n \"eslint\": \"^9.27.0\",\n \"typescript\": \"^5.8.3\"\n }\n}\n```\n\nNotes\n\t•\tReproduces consistently in local dev.\n\t•\tDoes not reproduce on Codesandbox with the Nuxt UI 3 starter (possibly due to different runtime setup).\n\t•\tNo functional issues observed so far, but the warning pollutes the console.\n\t•\tThis warning has only recently started appearing in the console logs, despite no code changes to this component on our end — possibly introduced in a recent dependency update.\n",[3068,3069,3070],{"name":3048,"color":3049},{"name":3023,"color":3024},{"name":3071,"color":3072},"reka-ui","56d799",4257,"[Vue warn] toRefs() expects a reactive object but received a plain one - \u003CUNavigationMenu />","2025-06-10T14:16:02Z","https://github.com/nuxt/ui/issues/4257",0.7233109,{"labels":3079,"number":3086,"owner":3026,"repository":3026,"state":3060,"title":3087,"updated_at":3088,"url":3089,"score":3090},[3080,3083],{"name":3081,"color":3082},"documentation","5319e7",{"name":3084,"color":3085},"3.x","29bc7f",11968,"docs: explain component name resolution","2023-01-19T16:03:39Z","https://github.com/nuxt/nuxt/issues/11968",0.7314173,{"labels":3092,"number":3097,"owner":3026,"repository":3026,"state":3060,"title":3098,"updated_at":3099,"url":3100,"score":3101},[3093,3094],{"name":3037,"color":3038},{"name":3095,"color":3096},"2.x","d4c5f9",7665,"since nuxt@2.13.3 some modern files are missing?","2023-01-22T15:36:01Z","https://github.com/nuxt/nuxt/issues/7665",0.7329179,{"labels":3103,"number":3109,"owner":3026,"repository":3026,"state":3060,"title":3110,"updated_at":3111,"url":3112,"score":3113},[3104,3105,3106],{"name":3084,"color":3085},{"name":3048,"color":3049},{"name":3107,"color":3108},"🔨 p3-minor","FBCA04",13557,"\"Failed to resolve component\" on HMR","2023-01-19T16:59:18Z","https://github.com/nuxt/nuxt/issues/13557",0.7355717,{"description":3115,"labels":3116,"number":3120,"owner":3026,"repository":3027,"state":3060,"title":3121,"updated_at":3122,"url":3123,"score":3124},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.13.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.24.0`\n- Nitro Version: `2.11.8`\n- Package Manager: `pnpm@10.9.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nnuxt-ui 3.1.0\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/form\n\nOpen in Chrome and check `issues` in devtools. The linked erroring nodes are all RadioGroups or CheckboxGroups.\n\n### Description\n\nThe FormField component correctly removes the `for` attribute from the label for the RadioGroup & CheckboxGroup components. Chrome devtools would suggest that there should be a further step so that `\u003Clabel>` is not used at all in this context.\n\nI am happy to propose changes.\n\n\u003Cimg width=\"917\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2f3f5fc1-d819-4974-9217-6ab75f31cf64\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3117,3118,3119],{"name":3048,"color":3049},{"name":3023,"color":3024},{"name":3052,"color":3053},3998,"Chrome reports the FormField label as `Incorrect use of \u003Clabel for=FORM_ELEMENT>` when wrapping RadioGroup or CheckboxGroup","2025-05-15T09:32:18Z","https://github.com/nuxt/ui/issues/3998",0.7364179,{"description":3126,"labels":3127,"number":3131,"owner":3026,"repository":3026,"state":3060,"title":3132,"updated_at":3133,"url":3134,"score":3135},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.15.0`\r\n- Nuxt Version: `3.0.0-rc.10`\r\n- Nitro Version: `0.5.3`\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- With UnoCSS and preflight activated for CSS\r\n\r\n### Reproduction\r\n\r\nSee this repo for reproduction : https://github.com/g4w3l/nuxt3rc10-unocss\r\n\r\n- If you launch the server with `npm run dev`, when you go on `/page1` you see a green button as expected\r\n- If you build it and launch it with \r\n```\r\nnpm run build\r\nnode .output/server/index.mjs\r\n```\r\nThe button on `/page1` goes transparent\r\n\r\n### Describe the bug\r\n\r\nI've put some styles on a button in a component. All works well in `dev` mode, if you inspect the `\u003Cbutton>`, the order of the styles is correct and the `bg-green` is applied : \r\n\r\n\r\nIn built version the order of the styles is inverted, thus the button is transparent : \r\n\r\n\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3128,3129,3130],{"name":3084,"color":3085},{"name":3048,"color":3049},{"name":3107,"color":3108},14943,"Nuxt RC10 - Reset inline styles take priority on built bundle","2023-01-19T17:42:57Z","https://github.com/nuxt/nuxt/issues/14943",0.7378785,{"description":3137,"labels":3138,"number":3142,"owner":3026,"repository":3027,"state":3060,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nSome button variants have `focus:outline-none` by default, so it's impossible to unset it. It's reduces accessibility\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3139,3140,3141],{"name":3048,"color":3049},{"name":3023,"color":3024},{"name":3052,"color":3053},3739,"Unable unset focus outline","2025-05-10T17:04:44Z","https://github.com/nuxt/ui/issues/3739",0.73907053,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f08urS7mcRIqjWHrkT0VaGaG7Grh-DTQsw6y2gLcke7I":-1},"/nuxt/ui/4590"]