mirror of
https://github.com/LukeHagar/form.git
synced 2025-12-10 04:19:54 +00:00
081a22896e
* chore: initial work at scaffolding Vue package * chore: initial work on adding in useField and useForm API * chore: fix build for Vue package * chore: migrate to slots for functional comps * chore: got initial fields rendering * chore: add component names for debuggability * chore: fix error regarding passdown props * chore: fix Promise constructor error in demo * chore: initial work at writing vue store implementation * feat: add initial useStore and Subscribe instances * fix: state is now passed as a dedicated reactive option * chore: temporarily remove Vue 2 typechecking * chore: make Provider and selector optional * chore: add createFormFactory * chore: attempt 1 of test - JSX * chore: attempt 2 of test - Vue JSX * chore: attempt 3 of test - H * chore: migrate to proper h function * chore: fix tests by bumping package * chore: fix JSX typings * chore: add another test for useForm * chore: listen for fieldAPIs to update * fix: fields should now update during mount * chore: add test for useField in Vue * test: add useField Vue tests * docs: add early docs for Vue package
1.0 KiB
1.0 KiB
id, title
| id | title |
|---|---|
| quick-start | Quick Start |
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.
<!-- App.vue -->
<script setup>
import { useForm } from '@tanstack/vue-form'
const form = useForm({
// Memoize your default values to prevent re-renders
defaultValues: {
fullName: '',
},
onSubmit: async (values) => {
// Do something with form data
console.log(values)
},
})
form.provideFormContext()
</script>
<template>
<div>
<div>
<form.Field name="fullName">
<template v-slot="field">
<input
:name="field.name"
:value="field.state.value"
:onBlur="field.handleBlur"
:onChange="(e) => field.handleChange(e.target.value)"
/>
</template>
</form.Field>
</div>
<button type="submit">Submit</button>
</div>
</template>
From here, you'll be ready to explore all of the other features of TanStack Form!