feat: add useAppForm API to Vue

[crutchcorn]

TODOs:

• Add docs

[nx-cloud]

View your CI Pipeline Execution ↗ for commit e2648fb

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	❌ Failed	1m 24s	View ↗
nx run-many --target=build --exclude=examples/**	✅ Succeeded	23s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-07-05 11:42:37 UTC

[pkg-pr-new]

More templates

• @tanstack/form-example-angular-array
• @tanstack/form-example-angular-large-form
• @tanstack/form-example-angular-simple
• @tanstack/form-example-lit-simple
• @tanstack/form-example-lit-ui-libraries
• @tanstack/form-example-react-array
• @tanstack/form-example-react-compiler
• @tanstack/field-errors-from-form-validators
• @tanstack/form-example-react-large-form
• @tanstack/form-example-react-next-server-actions
• @tanstack/form-example-react-query-integration
• @tanstack/form-example-remix
• @tanstack/form-example-react-simple
• @tanstack/form-example-react-standard-schema
• @tanstack/form-example-react-tanstack-start
• @tanstack/form-example-react-ui-libraries
• @tanstack/form-example-solid-array
• @tanstack/form-example-solid-simple
• @tanstack/form-example-svelte-array
• @tanstack/form-example-svelte-simple
• @tanstack/form-example-vue-array
• @tanstack/form-example-vue-field-components
• @tanstack/form-example-vue-simple

@tanstack/angular-form

npm i https://pkg.pr.new/@tanstack/angular-form@1455

@tanstack/form-core

npm i https://pkg.pr.new/@tanstack/form-core@1455

@tanstack/lit-form

npm i https://pkg.pr.new/@tanstack/lit-form@1455

@tanstack/react-form

npm i https://pkg.pr.new/@tanstack/react-form@1455

@tanstack/solid-form

npm i https://pkg.pr.new/@tanstack/solid-form@1455

@tanstack/svelte-form

npm i https://pkg.pr.new/@tanstack/svelte-form@1455

@tanstack/vue-form

npm i https://pkg.pr.new/@tanstack/vue-form@1455

commit: e2648fb

[codecov]

Codecov Report

Attention: Patch coverage is 71.87500% with 9 lines in your changes missing coverage. Please review.

Project coverage is 82.89%. Comparing base (daf8e57) to head (b170b68).
Report is 3 commits behind head on main.

Files with missing lines	Patch %	Lines
packages/vue-form/src/createFormComposition.tsx	71.87%	8 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1455      +/-   ##
==========================================
- Coverage   88.83%   82.89%   -5.94%     
==========================================
  Files          31        3      -28     
  Lines        1379       76    -1303     
  Branches      347        3     -344     
==========================================
- Hits         1225       63    -1162     
+ Misses        137       12     -125     
+ Partials       17        1      -16     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[daniel100097]

Hi, I was just looking for a way to split a form in Vue (using TanStack Form) into separate fieldset components (using useAppForm).

Have you by any chance already found a way to pass the form context to a fieldset component in Vue? Or maybe a way to work with just a subset of the main form?

Specifically, I was trying to create a reusable fieldset for an address, so I could easily reuse it across different forms.

[crutchcorn]

Unfortunately we're blocked by this ATM on Vue's side:

vuejs/core#8553

[daniel100097]

Even though it's not ideal with Vue, it might make sense to use the workaround for now — and once the Vue issue is resolved, we wouldn't need the workaround anymore.

I just tested it again with your StackBlitz example, and as soon as I write <component :is="compMap.one"/> , it seems to work.

    _createVNode($setup["SlotProvider"], null, {
      default: _withCtx(({ compMap }) => [
        (_openBlock(), _createBlock(_resolveDynamicComponent(compMap.one))),
        _cache[0] || (_cache[0] = _createElementVNode("p", null, "Despite it being a valid JS object and such:", -1 /* CACHED */)),
        _createElementVNode("p", null, _toDisplayString(JSON.stringify(compMap, null, 2)), 1 /* TEXT */)
      ]),
      _: 1 /* STABLE */,
      __: [0]
    })

[crutchcorn]

No dice; Since we're in v1, introducing an API on our end requires docs, migration patterns, and more. I've considered allowing for <component :is> but don't want to have folks have to recant old code per a suggestion once Vue is updated.

The workaround for now - if you'd like to do that yourself until we launch - is to copy+paste the implementation of useAppForm and such into your codebase - shouldn't require any additional changes upstream.

[mkeyy0]

@crutchcorn
First of all, thank you, TanStack team, for the great library; it really simplifies form building.

However, Vue is really missing the form composition feature. I know vuejs/core#8553 blocks this, but I agree with @daniel100097 here - I think it makes sense to release it with the current limitation that requires using <component :is /> syntax.

IMO, a limitation on the Vue side shouldn't block this feature, as this workaround is a reality of working with the Vue framework. Once the issue is resolved (or not, cause in vue you have to do the same trick for other situations, like when you use a component in computed, etc), existing code using <component :is /> will continue to work anyway, and users will gain the option to use hook components without it. The TanStack implementation itself won't need to change; it's just the framework-specific usage that will change.

P.S. I found that even Vue Router uses <component :is /> to create a transition, it exposes the Component from the slot, which you have to render with <component :is />. See: https://router.vuejs.org/guide/advanced/transitions#Transitions. Or do you have other concerns that stop you from doing that?

P.P.S. Also, I found that <component :is /> doesn't deal well with TypeScript, so it is also an issue with this approach, so maybe we should push the vue team to ship this faster