useForm

import { useForm } from '@tanstack/vue-form'

function useForm<
  TParentData,
  TFormOnMount extends undefined | FormValidateOrFn<TParentData>,
  TFormOnChange extends undefined | FormValidateOrFn<TParentData>,
  TFormOnChangeAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
  TFormOnBlur extends undefined | FormValidateOrFn<TParentData>,
  TFormOnBlurAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
  TFormOnSubmit extends undefined | FormValidateOrFn<TParentData>,
  TFormOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
  TFormOnDynamic extends undefined | FormValidateOrFn<TParentData>,
  TFormOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TParentData>,
  TFormOnServer extends undefined | FormAsyncValidateOrFn<TParentData>,
  TSubmitMeta,
>(
  opts?: FormOptions<
    TParentData,
    TFormOnMount,
    TFormOnChange,
    TFormOnChangeAsync,
    TFormOnBlur,
    TFormOnBlurAsync,
    TFormOnSubmit,
    TFormOnSubmitAsync,
    TFormOnDynamic,
    TFormOnDynamicAsync,
    TFormOnServer,
    TSubmitMeta
  >,
): VueFormExtendedApi<...>

<script setup lang="ts">
import { useForm } from '@tanstack/vue-form'

interface FormData {
  firstName: string
  lastName: string
}

const form = useForm<FormData>({
  defaultValues: {
    firstName: '',
    lastName: '',
  },
  onSubmit: async ({ value }) => {
    // Submit form data
    console.log('Form submitted:', value)
  },
})
</script>

<template>
  <form
    @submit="
      (e) => {
        e.preventDefault()
        e.stopPropagation()
        form.handleSubmit()
      }
    "
  >
    <form.Field
      name="firstName"
      :validators="{
        onChange: ({ value }) =>
          !value
            ? 'A first name is required'
            : value.length < 3
              ? 'First name must be at least 3 characters'
              : undefined,
      }"
    >
      <template v-slot="{ field, state }">
        <label :htmlFor="field.name">First Name:</label>
        <input
          :id="field.name"
          :name="field.name"
          :value="field.state.value"
          @input="
            (e) => field.handleChange((e.target as HTMLInputElement).value)
          "
          @blur="field.handleBlur"
        />
        <div v-if="state.meta.errors.length" style="color: red">
          {{ state.meta.errors[0] }}
        </div>
      </template>
    </form.Field>

    <form.Subscribe>
      <template v-slot="{ canSubmit, isSubmitting }">
        <button type="submit" :disabled="!canSubmit">
          {{ isSubmitting ? '...' : 'Submit' }}
        </button>
      </template>
    </form.Subscribe>
  </form>
</template>