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.