\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\" />",[3192,3193],{"name":3173,"color":3174},{"name":3176,"color":3177},4529,"Setting required=\"true\" on a \u003CUFormField> should also set it's child required to true","2025-07-31T14:36:21Z","https://github.com/nuxt/ui/issues/4529",0.82655615,{"description":3200,"labels":3201,"number":3210,"owner":3182,"repository":3183,"state":3211,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### 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.",[3202,3205,3208],{"name":3203,"color":3204},"question","d876e3",{"name":3206,"color":3207},"closed-by-bot","ededed",{"name":3209,"color":3207},"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":3217,"labels":3218,"number":3221,"owner":3182,"repository":3183,"state":3211,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### 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 ?",[3219,3220],{"name":3203,"color":3204},{"name":3176,"color":3177},4402,"UForm dirty isn't reactive ?","2025-06-26T13:33:41Z","https://github.com/nuxt/ui/issues/4402",0.80884284,{"description":3227,"labels":3228,"number":3232,"owner":3182,"repository":3183,"state":3211,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### 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",[3229,3230,3231],{"name":3173,"color":3174},{"name":3176,"color":3177},{"name":3179,"color":3180},4540,"Docs: Form validate on-submit","2025-07-22T19:11:45Z","https://github.com/nuxt/ui/issues/4540",0.80888855,{"description":3238,"labels":3239,"number":3246,"owner":3182,"repository":3183,"state":3211,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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_",[3240,3243],{"name":3241,"color":3242},"bug","d73a4a",{"name":3244,"color":3245},"duplicate","cfd3d7",2111,"USelectMenu performance issues","2024-09-11T14:05:18Z","https://github.com/nuxt/ui/issues/2111",0.81106925,{"description":3252,"labels":3253,"number":3256,"owner":3182,"repository":3257,"state":3211,"title":3258,"updated_at":3259,"url":3260,"score":3261},"https://nuxt.com/support/us",[3254],{"name":3241,"color":3255},"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":3263,"labels":3264,"number":3265,"owner":3182,"repository":3266,"state":3211,"title":3267,"updated_at":3268,"url":3269,"score":3270},"### 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":3272,"labels":3273,"number":3276,"owner":3182,"repository":3183,"state":3211,"title":3277,"updated_at":3278,"url":3279,"score":3280},"### 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```",[3274,3275],{"name":3241,"color":3242},{"name":3176,"color":3177},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,{"description":3282,"labels":3283,"number":3289,"owner":3182,"repository":3183,"state":3211,"title":3290,"updated_at":3291,"url":3292,"score":3293},"### Description\n\nWhen adding input tags, it would be awesome to have the ability to run logic that has the ability to stop the tag from being added\n\n### Additional context\n\n_No response_",[3284,3285,3286],{"name":3173,"color":3174},{"name":3176,"color":3177},{"name":3287,"color":3288},"upstream","78bddb",4406,"Validation Logic","2025-07-12T12:38:24Z","https://github.com/nuxt/ui/issues/4406",0.8182076,["Reactive",3295],{},["Set"],["ShallowReactive",3298],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBBtcWz7eDHV494zupCcaZH2Y8yYgCKz02mc1wt86DYE":-1},"/nuxt/ui/4485"]