Quick Start

Get started with TanStack Form in Vue

The bare minimum to get started with TanStack Form is to create a form and add a field. Keep in mind that this example does not include any validation or error handling… yet.

Installation

1. Install the package

   Install @tanstack/vue-form using your package manager of choice:

   npm install @tanstack/vue-form
   
2. Create your first form

   Import useForm and create a basic form with the Composition API:

   <script setup>
   import { useForm } from '@tanstack/vue-form'
   
   const form = useForm({
     defaultValues: {
       fullName: '',
     },
     onSubmit: async ({ value }) => {
       // Do something with form data
       console.log(value)
     },
   })
   </script>
   
   <template>
     <div>
       <form @submit.prevent.stop="form.handleSubmit">
         <div>
           <form.Field name="fullName">
             <template v-slot="{ field }">
               <input
                 :name="field.name"
                 :value="field.state.value"
                 @blur="field.handleBlur"
                 @input="(e) => field.handleChange((e.target as HTMLInputElement).value)"
               />
             </template>
           </form.Field>
         </div>
         <button type="submit">Submit</button>
       </form>
     </div>
   </template>
   

From here, you’ll be ready to explore all of the other features of TanStack Form!

Next Steps

Basic Concepts

Learn about form instances, fields, and field state

Validation

Add validation rules to your forms

Array Fields

Manage dynamic lists of form fields