fix(vue-form): losing reactivity
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 682
- Avg merge
- 5d 18h
- Merged PRs (30d)
- 7
Description
Describe the bug
The Vue useForm composable requires a workaround to handle asynchronous default values, which is functional but suboptimal for Vue’s reactivity system. The documentation recommends creating computed properties for each field and wrapping them in a reactive object to maintain reactivity, see https://tanstack.com/form/latest/docs/framework/vue/guides/async-initial-values. For example:
const firstName = computed(() => data.value?.firstName || '');
const lastName = computed(() => data.value?.lastName || '');
const defaultValues = reactive({ firstName, lastName });
const form = useForm({
defaultValues,
onSubmit: async ({ value }) => {
console.log(value);
},
});
While this works, it is not ideal, especially for forms with many fields, as it requires creating a computed property per field and a reactive wrapper. This may impact performance due to the overhead of multiple reactive proxies.
In contrast, the Solid and Svelte adapters use a getter-based API for createForm, which preserves reactivity without requiring individual reactive wrappers for each field. For example:
Solid and Svelte Adapter:
const form = createForm(() => ({
defaultValues: {
firstName: data?.firstName ?? '',
lastName: data?.lastName ?? '',
},
onSubmit: async ({ value }) => {
console.log(value);
},
}));
Your minimal, reproducible example
https://tanstack.com/form/latest/docs/framework/vue/guides/async-initial-values
Steps to reproduce
Use the same code from the docs
Expected behavior
useForm should accept a callback function for its entire configuration, similar to Solid’s createForm. For example:
const form = useForm(() => ({
defaultValues: {
firstName: data?.firstName ?? '',
lastName: data?.lastName ?? '',
email: data?.email ?? '',
phone: data?.phone ?? '',
},
onSubmit: async ({ value }) => {
console.log(value);
},
A pending PR TanStack/form#774 addresses this.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
All platforms
TanStack Form adapter
vue-form
TanStack Form version
1.11.1
TypeScript version
No response
Additional context
Related discussion: https://github.com/TanStack/form/discussions/1278
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Vue useForm composable and the async-initial-values documentation example described in the issue, then compare its configuration handling with the Solid and Svelte getter-based APIs. Done means Vue useForm accepts a callback for its full configuration and preserves reactive asynchronous default values without per-field computed wrappers; review the referenced pending PR for the current direction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100