``` the ```type=\"text\"``` and ```\u003CUSelect />``` fields match heights, but the ```type=\"search\"``` is the outlier.\n- When NOT using ```\u003CUFormField />```, then the ```type=\"text\"``` field is the outlier. \n\n### Additional context\n\nAs rendered in Dev Tools:\n\n\n\nAfter removing ```type=\"search\"``` in dev tools.\n\n\n\n\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",4014,"nuxt","ui","open","Input Fields on ```Safari``` has Mismatched Sizes","2025-04-29T04:28:11Z","https://github.com/nuxt/ui/issues/4014",0.67156357,{"description":3036,"labels":3037,"number":3041,"owner":3028,"repository":3029,"state":3030,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### Environment\n\n- Browser: Safari 18.3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://github.com/user-attachments/assets/b664a2d2-e2c4-4b0b-932e-64afbfd1a263\n\n### Description\n\nWhen loading the page with untouched form fields, a slight vertical height shift occurs after the first interaction with any input. This issue appears exclusively in Safari (macOS/iOS).\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":3025,"color":3026},4281,"`UForm` Form Input Fields Shift in Height on First Interaction (Safari-only)","2025-06-02T13:26:56Z","https://github.com/nuxt/ui/issues/4281",0.69962054,{"description":3047,"labels":3048,"number":3052,"owner":3028,"repository":3029,"state":3053,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Environment\n\n/\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nhttps://ui.nuxt.com/components/select-menu#theme\n\n### Description\n\nSize variants should change the text size of the `empty` slot (for example, `xs` variant should change the `emtpy` text size to `xs`.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3049,3050,3051],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4377,"closed","SelectMenu size does not change the `emtpy` text size","2025-06-25T14:04:07Z","https://github.com/nuxt/ui/issues/4377",0.6853174,{"description":3059,"labels":3060,"number":3064,"owner":3028,"repository":3028,"state":3053,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### Environment\n\n- Operating System: Windows_NT\n- Node Version: v20.18.3\n- Nuxt Version: 3.10.1\n- CLI Version: 3.11.1\n- Nitro Version: 2.9.6\n- Package Manager: npm@11.0.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n\nand valid on the vueform builder as well\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/async-dream-jv7fjn\n// use preview 5173\n\n### Describe the bug\n\nWhen using validation rules such as size, lte, and gte on a text field, the validation currently treats the input as a numeric value rather than validating against the character length of the string. This results in unexpected behavior — for example, setting size:3 on a text field causes it to fail unless the input is literally \"3\" or \"003\", instead of checking if the string is 3 characters long.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3061],{"name":3062,"color":3063},"pending triage","E99695",32615,"size, lte, and gte rules are comparing numeric value instead of string length when applied to text fields","2025-07-14T20:39:17Z","https://github.com/nuxt/nuxt/issues/32615",0.7006425,{"description":3070,"labels":3071,"number":3074,"owner":3028,"repository":3029,"state":3053,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.16.0\n- Nuxt Version: 3.17.5\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: bun@1.2.13\n- Builder: -\n- User Config: devtools, css, modules, runtimeConfig, compatibilityDate, i18n, auth, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.3, @sidebase/nuxt-auth@0.10.1, @nuxtjs/i18n@9.5.5, @nuxt/image@1.10.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.3\n\n### Reproduction\n\nNuxt UI 3: https://codesandbox.io/p/devbox/winter-cherry-2pwhgv\nNuxt UI 2: https://stackblitz.com/edit/nuxt-ui-w6xry7tp?file=app.vue\n\n### Description\n\nI'm migrating my app from Nuxt UI 2 to 3. This is a regression in the Nuxt UI 3 version.\n\nIf this isn't possible, can we have a tooltip or something?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3072,3073],{"name":3019,"color":3020},{"name":3022,"color":3023},4300,"Select should expand to item's full width or at least allow showing it","2025-06-11T09:09:13Z","https://github.com/nuxt/ui/issues/4300",0.7077639,{"description":3080,"labels":3081,"number":3086,"owner":3028,"repository":3029,"state":3053,"title":3087,"updated_at":3088,"url":3089,"score":3090},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nAbout using truncated text on interactive elements, in this case, buttons. e.g., https://ui.nuxt.com/components/button#truncate. Accessibility-wise, it is a concern.\n\nTruncating text with ellipsis is not an acceptable solution because the text that is truncated is still not readable by a screen reader. Instead, wrapping the text to the next line fixes the original layout issue while ensuring that the text is readable.\n\nI would recommend to fix this and suggest hyphenating words that are long or button text that overflows the button.\n\nThis could cause issues not only with screen readers but also has the potential to cause [Reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) and break [Text Resize](https://www.w3.org/WAI/WCAG21/Understanding/resize-text.html) and also for users that need wider text spacing as well, this could fail [Text Spacing](https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html).\n\n### Additional context\n\nRefer to: https://yatil.net/blog/text-overflow-ellipsis-harmful",[3082,3085],{"name":3083,"color":3084},"enhancement","a2eeef",{"name":3025,"color":3026},2407,"Truncating text on a button component","2025-05-10T17:12:08Z","https://github.com/nuxt/ui/issues/2407",0.71679157,{"description":3092,"labels":3093,"number":3097,"owner":3028,"repository":3029,"state":3053,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Environment\n\nN/A\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/compassionate-jasper-w2k3lm\n\n### Description\n\nThe `InputMenu` component throws an error if one of the fields provided in `filterFields` resolved to a nullish or non-string value. You can reproduce this in the sandbox by typing in the input box and observing the console.\n\nSo having the following setup errors out, which is a real-world use case I'm encountering this:\n\n```vue\n\u003Cscript lang=\"ts\" setup>\nconst items = [\n {\n label: 'foo',\n alias: 'something'\n },\n {\n label: 'bar'\n }\n]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUInputMenu :items :filter-fields=\"['label', 'alias']\" />\n\u003C/template>\n```\n\nThis is caused by `useFilter.contains` being called with a non-string value.\n\nIt is somewhat related to https://github.com/nuxt/ui/issues/3606 which has been addressed previously, but only for primitive item types.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3094,3095,3096],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4509,"InputMenu: error if field field is nullish or non-string","2025-07-12T10:15:32Z","https://github.com/nuxt/ui/issues/4509",0.7212466,{"description":3103,"labels":3104,"number":3106,"owner":3028,"repository":3028,"state":3053,"title":3107,"updated_at":3108,"url":3109,"score":3110},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.11.1\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: pnpm@8.15.4\r\n- Builder: -\r\n- User Config: vite, css, modules, $development, srcDir, serverDir, colorMode, app, runtimeConfig, components, compatibilityDate, hooks\r\n- Runtime Modules: @nuxt/image@1.7.0, @nuxt/eslint@0.3.13, @nuxtjs/tailwindcss@6.12.1, @nuxtjs/color-mode@3.4.2, nuxt-icon@0.6.10, @vueuse/nuxt@10.11.0, @nuxtjs/device@3.1.1, vue3-carousel-nuxt@1.1.2\r\n- Build Modules: -\r\n\n\n### Reproduction\n\n_/src/pages/news/[id].vue_\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport type { ArticleType } from '@/types/models'\r\n\r\nconst id = useRouteParam\u003Cstring>('id')\r\n\r\n// fetch returns an Article object with large text!!\r\nconst { data } = await useFetch\u003CArticleType>(`/api/news/${id.value}`)\r\nif (!data.value) {\r\n throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })\r\n}\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CContentView :text=\"data.text\" /> \u003C!-- it's server component: ContentView.server.vue -->\r\n\u003C/template>\r\n\r\n```\r\n\r\n_/src/components/content/ContentView.server.vue_\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\ndefineProps\u003C{ text: string }>()\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Carticle class=\"content\">\r\n \u003Cdiv v-html=\"text\">\u003C/div>\r\n \u003C/article>\r\n\u003C/template>\r\n\r\n```\r\n\r\n_server side: /server/api/news/[id].get.ts_\r\n\r\n```ts\r\nexport default defineEventHandler(async (event) => {\r\n try {\r\n return {\r\n text: 'Lorem ipsum dolor sit amet......', // For simple reproduce, it's enough to pass a text of approximately 50k chars. \r\n // ....other fields\r\n }\r\n } catch (error) {\r\n throw createError({ statusCode: 404, message: 'Material not found' })\r\n }\r\n})\r\n\r\n```\n\n### Describe the bug\n\nI've a ContentView component that accepts article content from the API server, which I pass to v-html. \r\nMy task is to render ContentView **ONLY** on the server side. For this, I added the **server** suffix to component (ContentView.**server**.vue).\r\n\r\nbut the problem is that a lot of data is passed to the ContentView component into props. \r\n```vue\r\n\u003CContentView v-bind=\"data\" /> \u003C!-- DATA with a large amount of data information -->\r\n```\r\nand that's why I get error \"431 Request Header Fields Too Large\".\r\n\r\nMy browser request:\r\n```\r\nRequest URL: http://localhost:3000/__nuxt_island/ContentView_KqN6hVg9ec.json?props=%7B%22text%22:%22Lorem+ipsum+dolor+sit+amet...... 50k chars\r\nRequest Method: GET\r\nStatus Code: 431 Request Header Fields Too Large\r\nRemote Address: [::1]:3000\r\n```\r\n\r\nThis probably not be a bug, but I need to do the component render only on the server side. Please any solutions.\r\n\r\nOr, so that the request to ISLAND is not GET.\r\n\r\nThank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3105],{"name":3062,"color":3063},28567,"Nuxt3 .server (island) components fail to render \"Request Header Fields Too Large\" if you pass a lot of data to props","2024-08-16T14:11:40Z","https://github.com/nuxt/nuxt/issues/28567",0.7274305,{"description":3112,"labels":3113,"number":3122,"owner":3028,"repository":3029,"state":3053,"title":3123,"updated_at":3124,"url":3125,"score":3126},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.11.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@9.15.4\n- Builder: -\n- User Config: modules, devtools, app, css, runtimeConfig, future, compatibilityDate, telemetry, eslint\n- Runtime Modules: @nuxt/ui-pro@3.0.0, @nuxt/eslint@1.0.1, @vueuse/nuxt@12.5.0, @nuxt/image@1.9.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3\n\n### Reproduction\n\nJust use `UAvatar` with `size=\"md\"`\n\n### Description\n\nHey,\n\nThe sizing and padding of UAvatar espicaly when fallback alt is being used does not look right on v3. See below same component first one on v2, second on v3 (yes it can be changed using config, but dont think this is good as a sane default. Issue also visible in UAvatarColorComponent on ui3 site light mode with vue logo)\n\n\u003Cimg width=\"712\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0b9c4827-9078-4064-bace-5d724df24b86\" />\n\n\u003Cimg width=\"712\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0a9f273f-cb27-4824-ac2f-6497980294ec\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3114,3115,3116,3117,3120],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},{"name":3118,"color":3119},"closed-by-bot","ededed",{"name":3121,"color":3119},"stale",3558,"Padding and Sizing on UAvatar","2025-06-18T09:01:34Z","https://github.com/nuxt/ui/issues/3558",0.72853506,{"description":3128,"labels":3129,"number":3133,"owner":3028,"repository":3028,"state":3053,"title":3134,"updated_at":3135,"url":3136,"score":3137},"Nuxt 3 should provide defaults headers for best developer experience.\n\n```js\n{ charset: 'utf-8' }\n{ name: 'viewport', content: 'width=device-width, initial-scale=1' }\n```\n\nWe shall also provide a key for uniqueness (`hid` for vue-meta)",[3130],{"name":3131,"color":3132},"3.x","29bc7f",11459,"app: Head defaults","2023-01-19T15:28:14Z","https://github.com/nuxt/nuxt/issues/11459",0.7322601,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDScKs4E5W3bbQ0JH7j6XJkIllJbMRaHD4paAXHiSD-8":-1},"/nuxt/ui/4117"]