Web / TanStack Interview Questions
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.
| Feature | TanStack Form | vee-validate | Vuelidate |
|---|---|---|---|
| TypeScript inference | First-class — field types inferred | Good with macros | Partial |
| Async validation | Built-in per-field | Via Yup / custom | Via custom |
| Framework | Agnostic (adapters) | Vue-specific | Vue-specific |
| Field arrays | Built-in | Via FieldArray component | Manual |
<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>
More Related questions...