How to use a form component with Inertiajs (Laravel)?

[francoism90]

Description

Take Login.vue for example:

<script setup lang="ts">
import { useValidation } from '@/composables/validation'
import { useForm } from '@inertiajs/vue3'
import type { FormSubmitEvent } from '~/@nuxt/ui/dist/module'

const props = defineProps<{
  action: string
  status?: string
}>()

const { validate } = useValidation()

const state = useForm({
  email: '',
  password: '',
  remember: false,
})

const submit = async (event: FormSubmitEvent<unknown>) => {
  console.log(event)

  state
    .transform((data) => ({
      ...data,
      remember: state.remember ? 'on' : '',
    }))
    .post(props.action, {
      onFinish: () => state.reset('password'),
    })
}
</script>

<template>
  <div class="flex w-full max-w-3xl flex-col">
    <UForm
      :validate="validate"
      :state="state"
      class="space-y-4"
      @submit="submit"
    >
      <UFormField label="Email" name="email">
        <UInput v-model="state.email" />
      </UFormField>

      <UFormField label="Password" name="password">
        <UInput v-model="state.password" type="password" />
      </UFormField>

      <UButton type="submit"> Submit </UButton>
    </UForm>
  </div>
</template>

This is the composable with the validation logic:

import type { FormDataType } from '@/types'
import type { InertiaForm } from '@inertiajs/vue3'
import { readonly, ref } from 'vue'
import type { FormError } from '~/@nuxt/ui/dist/module'

export function useValidation() {
  const errors = ref<FormError[]>()

  const validate = (obj: unknown) => {
    const form = obj as InertiaForm<FormDataType>

    errors.value = []

    for (const [key, value] of Object.entries(form.errors)) {
      errors.value.push({
        name: key,
        message: value as string,
      })
    }

    return errors.value
  }

  return {
    validate,
    errors: readonly(errors),
  }
}

The problem is that the validation only works on a second submit.
It does submit the form, but the validation errors are not being passed to the validation method.

Any other workarounds? Or anyone already using this with Inertia/Precognition? :)