\n \u003C/UFormField>\n\n \u003CUFormField label=\"Password\" name=\"password\">\n \u003CUInput v-model=\"state.password\" type=\"password\" />\n \u003C/UFormField>\n\n \u003CUButton type=\"submit\"> Submit \u003C/UButton>\n \u003C/UForm>\n \u003C/div>\n\u003C/template>\n```\n\nThis is the composable with the validation logic:\n\n```ts\nimport type { FormDataType } from '@/types'\nimport type { InertiaForm } from '@inertiajs/vue3'\nimport { readonly, ref } from 'vue'\nimport type { FormError } from '~/@nuxt/ui/dist/module'\n\nexport function useValidation() {\n const errors = ref\u003CFormError[]>()\n\n const validate = (obj: unknown) => {\n const form = obj as InertiaForm\u003CFormDataType>\n\n errors.value = []\n\n for (const [key, value] of Object.entries(form.errors)) {\n errors.value.push({\n name: key,\n message: value as string,\n })\n }\n\n return errors.value\n }\n\n return {\n validate,\n errors: readonly(errors),\n }\n}\n```\n\nThe problem is that the validation only works on a second submit.\nIt does submit the form, but the validation errors are not being passed to the validation method.\n\nAny other workarounds? Or anyone already using this with Inertia/Precognition? :)",[3305,3307],{"name":3225,"color":3306},"d876e3",{"name":3193,"color":3194},3621,"How to use a form component with Inertiajs (Laravel)?","2025-04-06T13:32:56Z","https://github.com/nuxt/ui/issues/3621",0.805217,["Reactive",3314],{},["Set"],["ShallowReactive",3317],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjh2VnQNURJILcLjBClLWajJ2q1xJ1ENUSg9XR3sxC48":-1},"/nuxt/ui/3965"]