nuxt / nuxt/ui

Add useForm() composable to be able to easily retrieve info about the current form

Open
#6,766 0 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

triage
Dominant language
TypeScript
Stars
6.9k
Forks
1.1k
Avg merge
1d 7h
Merged PRs (30d)
57

Description

Package

v4.x

Description

Currently there is no easy and nice way to retrieve info about the current form. For example, you can get info like dirtyFields, touchedFields etc. using a template ref on UForm which is not the most ergonomic way. Also not very composition API friendly. How about we add a useForm() composable so anywhere deep inside the form we can easily retrieve info about the form, form fields, their properties, state etc? That would be super useful!

const { fields, disabledFields, dirtyFields, touchedFields, isValid, errors } = useForm()

IMO, this would greatly improve DX.

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the existing UForm API and the form information currently retrieved through a template ref. Then determine how a useForm() composable should expose fields, disabledFields, dirtyFields, touchedFields, isValid, and errors from deep within a form. Done means the proposed composable provides the listed form state with a clear, composition-friendly API.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
developer-experience, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.