0107-nuxt-forms

What problem does it solve?

It solves the challenge of building form UIs in Nuxt that correctly manage reactive state, submit to an API, and display validation errors next to the right fields.

Core Features & Use Cases

• XForm-based submission flow: Configure url, method, reactive data, loading state, and lifecycle events (@submit, @before, @success, @error, @after, @finish) for consistent API interactions.
• Validation error handling: Read validation errors via form.errors helpers like has, first, get, and any, and display them using UFormField’s :error binding.
• FormBuilder alternative: Use useFormBuilder for a fluent, composable way to define post endpoint, transform data before submit, and handle success/error flows.
• Use cases: Creating and updating entities via slideovers/modals, handling field-level validation errors, and maintaining predictable form state/reset behavior after success.

Quick Start

Ask the AI to generate a Nuxt component that uses XForm to submit to /api/posts, binds reactive formData to UFormField + inputs, and displays form.errors.first("<field>") for each field.