\nThe input rendered in the DOM :\n\u003Cimg width=\"428\" height=\"128\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3be31e65-187f-48cb-8ea5-b5a1cb7286dc\" />",[3038,3039,3040],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4529,"Setting required=\"true\" on a \u003CUFormField> should also set it's child required to true","2025-07-15T12:21:20Z","https://github.com/nuxt/ui/issues/4529",0.82655615,{"description":3047,"labels":3048,"number":3051,"owner":3028,"repository":3029,"state":3030,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Description\n\n> @hasan-ozbey the mutation on `@create` is handled in your `onCreate` function, outside of `USelectMenu` component, that's why it doesn't trigger the `@change` event. I see how this can be an issue if you need to validate created items since it won't send any `input` / `change` events to the Form in this case.\n> \n> Can you create an issue so we can discuss it separately? \n\n _Originally posted by @romhml in [#3660](https://github.com/nuxt/ui/issues/3660#issuecomment-2873075460)_\n\n------\n\nBy default, the form validates when a field emits `blur`, `input`, or `change` events.\n\nSelecting an item from the search results emits `change`, triggering immediate validation. But when `onCreate` creates an item programmatically, it doesn't emit `change`, so validation is deferred until the next `blur` event.\n\n```ts\n\u003Cscript setup lang=\"ts\">\nconst selected = ref('')\n\nfunction onCreate(item: string) {\n selected.value = item\n}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUSelectMenu\n v-model=\"selected\"\n create-item\n @create=\"onCreate\"\n @change=\"console.log('CHANGE')\"\n />\n\u003C/template>\n```\n\nI think created items should emit `change` so we can validate them properly.\n\nAdditionally, because of https://github.com/nuxt/ui/issues/3736,the field always starts in an error state when a new item is created in certain conditions (regardless of whether the item meets the schema's requirements or not).\n\n------\n\nCurrent workaround is to run the validation manaully on a field after mutating the model:\n\n```ts\nasync function onCreate(item: string) {\n selected.value = item\n\n await formRef.value?.validate({ name: 'fieldName' })\n}\n```",[3049,3050],{"name":3019,"color":3020},{"name":3022,"color":3023},4139,"USelectMenu should emit 'change' after creating an item","2025-05-13T09:15:02Z","https://github.com/nuxt/ui/issues/4139",0.8275084,{"description":3057,"labels":3058,"number":3067,"owner":3028,"repository":3029,"state":3068,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Description\n\nI see in the [examples](https://ui.nuxt.com/components/form) form validation errors appear only for fields what were used by the user - just initialized form will all fields required will not be all in red, errors appear only on fields I left empty or when I try to submit form.\r\n\r\nThis behavior does not work in my project. Here it shows required errors everywhere when I change the first field.\r\n\r\nHow this „used field“ detection works? What to do to not break it?\r\n\r\nThank you for help.",[3059,3062,3065],{"name":3060,"color":3061},"question","d876e3",{"name":3063,"color":3064},"closed-by-bot","ededed",{"name":3066,"color":3064},"stale",1815,"closed","How validation hides errors for not yet used fields","2025-06-19T02:12:24Z","https://github.com/nuxt/ui/issues/1815",0.74082077,{"description":3074,"labels":3075,"number":3078,"owner":3028,"repository":3029,"state":3068,"title":3079,"updated_at":3080,"url":3081,"score":3082},"### Description\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from \"zod\";\nimport type { FormSubmitEvent } from \"@nuxt/ui\";\ninterface Props {\n cabinData?: Cabin;\n}\nconst props = defineProps\u003CProps>();\nconst form = useTemplateRef(\"form\");\n\nconst schema = z.object({\n name: z.string().min(1, \"Cabin name is required\"),\n capacity: z.number().min(1, \"Capacity must be at least 1\").optional(),\n price: z.number().min(0, \"Price must be at least 0\").optional(),\n discount: z.number().min(0, \"Discount must be at least 0\").optional(),\n image: z.string().optional(),\n});\n\nconst isDirty: ComputedRef\u003Cboolean | undefined> = computed(() => {\n return form.value?.dirty;\n});\n\ntype Schema = z.output\u003Ctypeof schema>;\nconst state = reactive\u003CPartial\u003CSchema>>({\n name: props.cabinData?.name || \"\",\n capacity: props.cabinData?.capacity || undefined,\n price: props.cabinData?.price || undefined,\n discount: props.cabinData?.discount || undefined,\n image: undefined,\n});\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {}\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUForm\n ref=\"form\"\n :schema=\"schema\"\n :state=\"state\"\n class=\"w-full space-y-8\"\n @submit=\"onSubmit\"\n >\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"name\" class=\"w-1/5 font-semibold\">Name\u003C/label>\n \u003CUFormField name=\"name\">\n \u003CUInput\n id=\"name\"\n v-model=\"state.name\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"capacity\" class=\"w-1/5 font-semibold\">Capacity\u003C/label>\n \u003CUFormField name=\"capacity\">\n \u003CUInputNumber\n id=\"capacity\"\n v-model=\"state.capacity\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"price\" class=\"w-1/5 font-semibold\">Price\u003C/label>\n \u003CUFormField name=\"price\">\n \u003CUInputNumber\n id=\"price\"\n v-model=\"state.price\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"border-b-grey-200 flex gap-12 border-b py-4\">\n \u003Clabel for=\"discount\" class=\"w-1/5 font-semibold\">Discount\u003C/label>\n \u003CUFormField name=\"discount\">\n \u003CUInputNumber\n id=\"discount\"\n v-model=\"state.discount\"\n color=\"info\"\n :ui=\"{\n base: ' disabled:bg-grey-50/10',\n }\"\n />\n \u003C/UFormField>\n \u003C/div>\n\n \u003Cdiv class=\"flex justify-end pt-4\">\n \u003CUTooltip arrow text=\"Data has not been changed\">\n \u003CUButton\n type=\"submit\"\n class=\"bg-brand-600 text-brand-50 hover:bg-brand-700 px-4 py-2 uppercase hover:cursor-pointer\"\n size=\"lg\"\n :disabled=\"!isDirty\"\n >\n Update Data\n \u003C/UButton>\n \u003C/UTooltip>\n\n \u003CUButton\n class=\"bg-grey-200 text-grey-900 hover:bg-grey-50 ml-2 px-4 py-2 uppercase hover:cursor-pointer\"\n size=\"lg\"\n @click=\"\n state.name = '';\n state.capacity = undefined;\n state.price = undefined;\n state.discount = undefined;\n state.image = undefined;\n form?.clear();\n \"\n >\n Cancel\n \u003C/UButton>\n \u003C/div>\n \u003C/UForm>\n\u003C/template>\n\n```\n\n> this is my code i want disable button depending on if fields is dirty or not i'm using computed now but i used ref alswo watchEffect and watch with getter to watch if is there any changes in fields,but depending on documentation dirty is ref boolean but it doesn't change what am i doing wrong ?",[3076,3077],{"name":3060,"color":3061},{"name":3022,"color":3023},4402,"UForm dirty isn't reactive ?","2025-06-26T13:33:41Z","https://github.com/nuxt/ui/issues/4402",0.80884284,{"description":3084,"labels":3085,"number":3089,"owner":3028,"repository":3029,"state":3068,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### Description\n\nIn v2 there was the option to validate a form only when submitting:\n\n```html\n\u003CUForm\n :schema\n :state\n :validate-on=\"['submit']\"\n>\n```\n\nWith v3 this option is gone. Can it be brought back?\n\n### Additional context\n\nI once read that form validation / show errors on submit and on blur are the best user experiences (depending on usecase) but the first one isnt possible anymore?\n\nRelated: https://github.com/nuxt/ui/issues/3853",[3086,3087,3088],{"name":3019,"color":3020},{"name":3022,"color":3023},{"name":3025,"color":3026},4540,"Docs: Form validate on-submit","2025-07-22T19:11:45Z","https://github.com/nuxt/ui/issues/4540",0.80888855,{"description":3095,"labels":3096,"number":3103,"owner":3028,"repository":3029,"state":3068,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\r\n------------------------------\n\n### Version\n\nv2.18.4\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-8i3ia2?file=app.vue\n\n### Description\n\nThe `USelectMenu` component has performance issues with moderately sized lists. It exhibits a noticeable delay when opening, and the search input becomes completely unresponsive. \r\n\r\nI would expect some lags with lists exceeding 1500-2000 items, the issue is already present with a list of just 250 elements, which is relatively small.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3097,3100],{"name":3098,"color":3099},"bug","d73a4a",{"name":3101,"color":3102},"duplicate","cfd3d7",2111,"USelectMenu performance issues","2024-09-11T14:05:18Z","https://github.com/nuxt/ui/issues/2111",0.81106925,{"description":3109,"labels":3110,"number":3113,"owner":3028,"repository":3114,"state":3068,"title":3115,"updated_at":3116,"url":3117,"score":3118},"https://nuxt.com/support/us",[3111],{"name":3098,"color":3112},"ff281a",1167,"nuxt.com","Sponsors page does not show any sponsors","2023-06-06T12:14:43Z","https://github.com/nuxt/nuxt.com/issues/1167",0.81120664,{"description":3120,"labels":3121,"number":3122,"owner":3028,"repository":3123,"state":3068,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.14.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.22.5`\n- Nitro Version: `2.11.5`\n- Package Manager: `bun@1.2.4`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `app`, `site`, `sitemap`, `robots`, `css`, `icon`, `image`, `ui`, `devtools`, `future`, `unhead`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui@3.0.0-beta.3`, `@pinia/nuxt@0.10.1`, `@nuxt/scripts@0.10.5`, `@nuxt/image@1.9.0`, `@nuxtjs/seo@2.2.0`\n- Build Modules: `-`\n\n### Reproduction\n\nnda\n\n### Describe the bug\n\nnr dev\n$ nuxt dev\nNuxt 3.16.0 with Nitro 2.11.5 nuxi 8:23:08 PM\n 8:23:08 PM\n ➜ Local: http://localhost:3003/\n ➜ Network: use --host to expose\n\n ➜ DevTools: press Shift + Option + D in the browser (v2.2.1) 8:23:10 PM\n\n\n✔ Nuxt Icon loaded local collection elfi with 70 icons 8:23:10 PM\nℹ Running with compatibility version 4 nuxt 8:23:10 PM\n✔ Vite client built in 190ms 8:23:11 PM\n✔ Vite server built in 528ms 8:23:12 PM\n\n[nitro 8:23:14 PM] ERROR Error: Could not load /\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs (imported by node_modules/nuxt-og-image/dist/runtime/server/og-image/satori/instances.js): ENOENT: no such file or directory, open '/\u003Cmy-path>/node_modules/unenv/dist/runtime/runtime/mock/empty.mjs'\n\n\nundefined\n\n### Additional context\n\nUpgraded by \"nuxi upgrade -f\" from 3.15.4 and couldn't able to start properly with provided error.\nTried with unhead flag in nuxt.config - same error\n```\nunhead: {\n legacy: true,\n }\n```\n\n### Logs\n\n```shell-script\n\n```",[],414,"scripts","Nuxt 3.16.0 won't start properly nor dev nor build","2025-03-07T18:58:03Z","https://github.com/nuxt/scripts/issues/414",0.81490505,{"description":3129,"labels":3130,"number":3133,"owner":3028,"repository":3029,"state":3068,"title":3134,"updated_at":3135,"url":3136,"score":3137},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v21.5.0\n- Nuxt Version: -\n- CLI Version: 3.16.0\n- Nitro Version: -\n- Package Manager: npm@10.2.4\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\n3.0.0-alpha.10\n\n### Reproduction\n\nNo production link yet\n\n### Description\n\nThe `title` slot should return the item's title instead of active item's title.\n\nUsage:\n```javascript\n\u003CUStepper\n ref=\"stepper\"\n v-model=\"activeStep\"\n :items=\"items\"\n >\n \u003Ctemplate #title=\"{ item }\">\n \u003Ch2>{{ item.title }}\u003C/h2>\n \u003C/template>\n.....\n\u003C/UStepper>\n```\n\n\n\n### Additional context\n\nInstead of `Project` to be returned in every steps, I would like to display each item's title.\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3131,3132],{"name":3098,"color":3099},{"name":3022,"color":3023},2888,"UStepper - \"title\" slot is returning the active step's title instead of item's title","2024-12-12T23:04:45Z","https://github.com/nuxt/ui/issues/2888",0.81685483,["Reactive",3139],{},["Set"],["ShallowReactive",3142],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBBtcWz7eDHV494zupCcaZH2Y8yYgCKz02mc1wt86DYE":-1},"/nuxt/ui/4485"]