[WIP] Add useAppForm API to Vue by crutchcorn · Pull Request #1455 · TanStack/form

crutchcorn · 2025-04-25T11:48:03Z

This PR adds the ability to use Form Composition APIs in our Vue adapter.

This PR is blocked on Vue 3.6's release and cannot be released until that version hits Vue's stable channel.

TODOs:

Add docs

nx-cloud · 2025-04-25T11:48:26Z

View your CI Pipeline Execution ↗ for commit aba6950

Command	Status	Duration	Result
`nx affected --targets=test:sherif,test:knip,tes...`	✅ Succeeded	41s	View ↗
`nx run-many --target=build --exclude=examples/**`	✅ Succeeded	6s	View ↗

☁️ Nx Cloud last updated this comment at 2026-05-11 00:11:19 UTC

pkg-pr-new · 2025-04-25T11:49:15Z

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/form-devtools

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

@tanstack/lit-form

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

@tanstack/preact-form

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

@tanstack/react-form

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

@tanstack/react-form-devtools

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

@tanstack/react-form-nextjs

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

@tanstack/react-form-remix

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

@tanstack/react-form-start

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

@tanstack/solid-form

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

@tanstack/solid-form-devtools

npm i https://pkg.pr.new/@tanstack/solid-form-devtools@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: eef8e51

codecov · 2025-04-25T11:50:21Z

Codecov Report

❌ Patch coverage is 68.57143% with 11 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.93%. Comparing base (6892ed0) to head (eef8e51).
⚠️ Report is 214 commits behind head on main.

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

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1455      +/-   ##
==========================================
+ Coverage   90.35%   90.93%   +0.57%     
==========================================
  Files          38       60      +22     
  Lines        1752     2349     +597     
  Branches      444      571     +127     
==========================================
+ Hits         1583     2136     +553     
- Misses        149      191      +42     
- Partials       20       22       +2

☔ 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 · 2025-07-18T12:17:26Z

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 · 2025-07-18T13:28:52Z

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

vuejs/core#8553

daniel100097 · 2025-07-18T14:11:12Z

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 · 2025-07-18T14:23:45Z

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 · 2025-11-20T14:25:51Z

@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

crutchcorn · 2026-05-06T09:14:57Z

Great news here y'all:

vuejs/core#8553

Has finally been merged! :D

This means that Vue 3.6 will support our needs here and unblock the PR from moving forward. I'll be prepping this PR for merge leading up to that point

coderabbitai · 2026-05-06T09:28:51Z

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a4916b12-1826-49dd-b517-050cd3862195

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch vue-use-app-form

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-06T09:29:24Z

🚀 Changeset Version Preview

No changeset entries found. Merging this PR will not cause a version bump for any packages.

mkeyy0 · 2026-05-06T11:37:21Z

Omg! That's such a great news! Thank you for your amazing work!

Blocked by: https://stackblitz.com/edit/vue-v-slot-comp-map-bug-repro

# Conflicts: # examples/vue/array/package.json # examples/vue/simple/package.json # packages/vue-form/package.json # pnpm-lock.yaml

# Conflicts: # examples/vue/array/package.json # examples/vue/simple/package.json

# Conflicts: # examples/vue/array/package.json # examples/vue/simple/package.json # pnpm-lock.yaml

crutchcorn marked this pull request as draft April 25, 2025 14:20

crutchcorn force-pushed the vue-use-app-form branch from e2648fb to cf995c1 Compare May 6, 2026 09:28

crutchcorn and others added 7 commits May 8, 2026 10:34

feat: add useAppForm API to Vue

35eca83

chore: fix a few problems with TS and runtime

9df4254

chore: push broken example

fc37d38

Blocked by: https://stackblitz.com/edit/vue-v-slot-comp-map-bug-repro

chore: upgrade Vue versions

21aca66

# Conflicts: # examples/vue/array/package.json # examples/vue/simple/package.json # packages/vue-form/package.json # pnpm-lock.yaml

chore: fix sherif

00e1244

ci: apply automated fixes and generate docs

9a6c533

chore: update Vue to 3.6 beta

5d92d4a

crutchcorn force-pushed the vue-use-app-form branch from c1c6c21 to 5d92d4a Compare May 8, 2026 14:35

crutchcorn added 4 commits May 8, 2026 10:39

chore: fix build in Vue

547fb6b

chore: remove logging in example

9001acb

fix: fields no longer recreated on each render

066ea5c

chore: fix Sherif

60d033d

crutchcorn changed the title ~~feat: add useAppForm API to Vue~~ [WIP] Add useAppForm API to Vue May 8, 2026

crutchcorn and others added 3 commits May 8, 2026 11:48

feat: add new getFormType usage

da68a94

docs: add docs for form composition

71b4667

ci: apply automated fixes and generate docs

b52c403

crutchcorn and others added 4 commits May 8, 2026 12:01

Merge branch 'main' into vue-use-app-form

79e0dc8

# Conflicts: # examples/vue/array/package.json # examples/vue/simple/package.json

Merge branch 'main' into vue-use-app-form

aba6950

# Conflicts: # examples/vue/array/package.json # examples/vue/simple/package.json # pnpm-lock.yaml

chore: fix Vue's eslint

c0641ec

ci: apply automated fixes and generate docs

eef8e51

Uh oh!

Conversation

crutchcorn commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODOs:

Uh oh!

nx-cloud Bot commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Apr 25, 2025 • edited by sentry Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

daniel100097 commented Jul 18, 2025

Uh oh!

crutchcorn commented Jul 18, 2025

Uh oh!

daniel100097 commented Jul 18, 2025

Uh oh!

crutchcorn commented Jul 18, 2025

Uh oh!

mkeyy0 commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

crutchcorn commented May 6, 2026

Uh oh!

coderabbitai Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

github-actions Bot commented May 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Changeset Version Preview

Uh oh!

mkeyy0 commented May 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

crutchcorn commented Apr 25, 2025 •

edited

Loading

nx-cloud Bot commented Apr 25, 2025 •

edited

Loading

pkg-pr-new Bot commented Apr 25, 2025 •

edited

Loading

codecov Bot commented Apr 25, 2025 •

edited by sentry Bot

Loading

mkeyy0 commented Nov 20, 2025 •

edited

Loading

coderabbitai Bot commented May 6, 2026 •

edited

Loading

github-actions Bot commented May 6, 2026 •

edited

Loading