TODOs:

[ ] Add docs

Apr 25 '25 11:04 crutchcorn

View your CI Pipeline Execution ↗ for commit e2648fb08832472aff2c97313840d148338830a9

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

Apr 25 '25 11:04 nx-cloud[bot]

More templates

@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

Apr 25 '25 11:04 pkg-pr-new[bot]

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 :warning:

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

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

Apr 25 '25 11:04 codecov[bot]

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.

Jul 18 '25 12:07 daniel100097

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

https://github.com/vuejs/core/issues/8553

Jul 18 '25 13:07 crutchcorn

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]
    })

Jul 18 '25 14:07 daniel100097

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.

Jul 18 '25 14:07 crutchcorn

@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 https://github.com/vuejs/core/issues/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

Nov 20 '25 14:11 mkeyy0

feat: add useAppForm API to Vue

TODOs:

Codecov Report