Skip to content

docs(vue): add Built-in Debouncing and Form listeners sections to listeners guide#2184

Open
dojhoanrd-jw wants to merge 1 commit into
TanStack:mainfrom
dojhoanrd-jw:docs/vue-add-form-listeners-section
Open

docs(vue): add Built-in Debouncing and Form listeners sections to listeners guide#2184
dojhoanrd-jw wants to merge 1 commit into
TanStack:mainfrom
dojhoanrd-jw:docs/vue-add-form-listeners-section

Conversation

@dojhoanrd-jw
Copy link
Copy Markdown
Contributor

@dojhoanrd-jw dojhoanrd-jw commented May 15, 2026

🎯 Changes

Bring the Vue listeners guide to parity with the React listeners guide:

  • Vue listeners guide (docs/framework/vue/guides/listeners.md): Add two missing sections that already exist in the React and Preact guides but were absent from the Vue guide:
    • ### Built-in Debouncing — documents onChangeDebounceMs / onBlurDebounceMs for field-level listeners.
    • ### Form listeners — documents form-level listeners (onMount, onSubmit, onChange, onBlur). The form-level listener API is defined in packages/form-core/src/FormApi.ts and is re-exposed by useForm in packages/vue-form/src/useForm.tsx via FormOptions. Until now, Vue users had no documentation describing this capability (useful for autosave, mount-time logging, etc.).

The new content is adapted from the React guide to use Vue-idiomatic syntax (:listeners="{ ... }", <template v-slot="{ field }">, <script setup>). No existing content was modified — the change is purely additive (+61 lines), bringing the Vue guide to the same length and section structure as the React guide.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

🚀 Release Impact

  • This change affects published code, and I have generated a changeset.
  • This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Documentation

  • Expanded Vue framework listener documentation with new comprehensive guides covering debouncing implementations for change and blur event handlers, form-level listener configuration with detailed parameter specifications for initialization, submission, and interaction events, along with practical working examples demonstrating field synchronization, dependency management, and reset patterns.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 15, 2026

📝 Walkthrough

Walkthrough

The Vue listeners guide is enhanced with two new documentation sections: a "Built-in Debouncing" section explaining onChangeDebounceMs and onBlurDebounceMs options with a Vue example, and a "Form listeners" section documenting listener parameter shapes and providing a useForm configuration example showing autosave and debouncing.

Changes

Vue Listeners Guide Expansion

Layer / File(s) Summary
Built-in Debouncing
docs/framework/vue/guides/listeners.md
Documents onChangeDebounceMs and onBlurDebounceMs options for throttling listener-triggered work, with a Vue snippet demonstrating debounced onChange and delayed field reset.
Form Listeners
docs/framework/vue/guides/listeners.md
Documents form-level listener capabilities, parameter signatures for onMount/onSubmit versus onChange/onBlur, and a useForm example configuring autosave and debounced listeners.

🎯 2 (Simple) | ⏱️ ~10 minutes

🐰 Debounced whispers in the Vue guide,
Form listeners gently deferred—
A hop through parameters and examples true,
Where fieldState and formState blur,
And patience yields results assured!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main changes: adding two missing sections (Built-in Debouncing and Form listeners) to the Vue listeners guide.
Description check ✅ Passed The description comprehensively covers the changes, motivation, impact, and follows the repository template with all required sections completed and checked.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@docs/framework/vue/guides/listeners.md`:
- Line 68: Update the two section headings currently written as "### Built-in
Debouncing" (and the other heading flagged around the same spot) to use H2 level
(prefix with "##" instead of "###") so the document has proper heading
hierarchy; locate the headings by their literal text ("Built-in Debouncing" and
the other flagged heading text) and change their markdown prefixes accordingly.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9e2d2c6c-fac0-48b5-9855-8000e994d89d

📥 Commits

Reviewing files that changed from the base of the PR and between 3886dcc and 82a1f0f.

📒 Files selected for processing (1)
  • docs/framework/vue/guides/listeners.md

</template>
```

### Built-in Debouncing
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix heading levels to follow markdown hierarchy.

Both new section headings use h3 (###) but should use h2 (##) since there are no h2 headings in this document. This violates markdown heading hierarchy rules.

📝 Proposed fix
-### Built-in Debouncing
+## Built-in Debouncing
-### Form listeners
+## Form listeners

Also applies to: 90-90

🧰 Tools
🪛 markdownlint-cli2 (0.22.1)

[warning] 68-68: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3

(MD001, heading-increment)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@docs/framework/vue/guides/listeners.md` at line 68, Update the two section
headings currently written as "### Built-in Debouncing" (and the other heading
flagged around the same spot) to use H2 level (prefix with "##" instead of
"###") so the document has proper heading hierarchy; locate the headings by
their literal text ("Built-in Debouncing" and the other flagged heading text)
and change their markdown prefixes accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant