nuxt / nuxt/ui

Bug: Form validation exception with Zod schema (Nuxt 4)

Open
#6,309 0 comments 0 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

Environment
  • Operating System: Darwin
  • Node Version: v24.6.0
  • Nuxt Version: 4.1.2
  • Nuxt UI: 4.0.0
  • Zod: 4.1.11
  • Package Manager: yarn 4.5.3
Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.1.2

Reproduction

Minimal example:

const schema = z.object({
  email: z.string().email(),
  age: z.number()
})

const state = reactive({
  email: '',
  age: '' // type mismatch
})

<UForm :schema="schema" :state="state" ref="form">
</UForm>

await form.value.validate()



🧾 Expected behavior

Validation errors should be returned and handled by the form, not thrown as an exception.

Zod errors should be mapped to form errors instead of rejecting the promise.

### Description

When using a Zod schema with `UForm` in Nuxt UI on Nuxt 4, form validation throws:

`Uncaught (in promise) j: Form validation exception`

instead of returning validation errors normally.

This makes it difficult to handle validation properly and also hides the original validation cause.


### Additional context

- Using Nuxt 4
- schema.safeParse(state) works as expected
- Issue seems related to how UForm handles validation internally (likely using parse instead of safeParse or improperly handling errors)

This seems like a DX issue as well, since the error message is not descriptive and hides the original Zod error.

### Logs

```shell-script
DiwZs0U7.js:1 Uncaught (in promise) j: Form validation exception

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 with the UForm validation path and reproduce the issue using the minimal Zod schema and mismatched reactive state shown in the report. Compare the form result with schema.safeParse(state); done means validation errors are returned and mapped to form errors without an uncaught exception or loss of the original cause.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
62/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.