What is TanStack Form and how do you build a basic form in Vue?

TanStack Form is a headless, type-safe form state library with built-in async validation, field arrays and subscriptions. Unlike Vue-specific libraries (vee-validate, Vuelidate) it is framework-agnostic — the same library targets Vue, React and Solid via adapters.

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

const form = useForm({
  defaultValues: { username:"", email:"", age:0 },
  onSubmit: async ({ value })=>{
    // value fully typed: { username:string, email:string, age:number }
    await createUser(value)
  },
})
</script>
<template>
  <form @submit.prevent="form.handleSubmit()">
    <form.Field name="username">
      <template #default="{ field }">
        <input :value="field.state.value"
               @blur="field.handleBlur"
               @input="field.handleChange(($event.target as HTMLInputElement).value)" />
        <span v-if="field.state.meta.errors.length">
          {{ field.state.meta.errors[0] }}
        </span>
      </template>
    </form.Field>
    <button type="submit" :disabled="form.state.isSubmitting">Save</button>
  </form>
</template>