VeeValidate 4.x nested error mapping: flat vs nested structure limits

Answer

VeeValidate 4.x does not automatically convert dot‑notation error keys (e.g., profile.email) into a nested error object. The errors ref returned by useForm or the Form component remains a flat map by default.

Confirmed facts

• The library provides no configuration flag or provider such as nestErrors: true to enable automatic nesting.
• When a schema‑based validator (Yup or custom) is used, omitted parent nested objects do not generate errors for their child fields unless those children are explicitly required.
• Scoped forms (<Form> inside another <Form>) receive their own isolated errors and handleSubmit unless the parent context is explicitly injected via inject('veeValidate').

Likely explanation

The flat structure keeps the API simple and ensures compatibility with VeeValidate’s built‑in helpers (ErrorMessage, Field, etc.), which look up errors by dot‑notation keys. Automatic nesting would break that lookup and require additional reactivity handling.

Steps to verify the current behavior

1. Install VeeValidate 4.x (if not already):

   npm i veevalidate@^4

2. Create a form with nested fields:

<template>
  <Form @submit="onSubmit">
    <Field name="profile.email" />
    <Field name="profile.address.street" />
    <button type="submit">Submit</button>
  </Form>
</template>

<script setup>
import { useForm } from 'veevalidate';
const { handleSubmit, errors } = useForm({
  initialValues: { profile: { email: '', address: { street: '' } } }
});
function onSubmit(values) {
  console.log('submitted', values);
}
// After submission, inspect errors:
console.log(errors.value); // { "profile.email": "...", "profile.address.street": "..." }
</script>

1. Submit with invalid data and observe that errors.value contains flat keys like profile.email and profile.address.street.
2. Attempt to set a non‑existent option such as nestErrors: true in useForm; the errors object stays flat, confirming the lack of such flag.
3. For a scoped form, nest a second <Form> inside the first; submit the inner form and verify its errors object is independent of the outer form’s errors.

Manual nesting (if needed)

If your UI requires a nested error object, you can transform the flat map with a simple reducer. Note that the resulting plain object loses VeeValidate’s reactivity:

function nestErrors(flat) {
  return Object.keys(flat).reduce((acc, key) => {
    const parts = key.split('.');
    let cur = acc;
    for (let i = 0; i < parts.length - 1; i++) {
      const p = parts[i];
      if (!(p in cur)) cur[p] = {};
      cur = cur[p];
    }
    cur[parts[parts.length - 1]] = flat[key];
    return acc;
  }, {});
}

// Usage:
const nested = nestErrors(errors.value);

Implications for optional nested objects

When using a schema validator, if a parent object (e.g., profile) is undefined, VeeValidate skips validation of its child fields unless those children are marked as required. No errors are generated for missing parents.

Missing diagnostic detail

If you are using scoped forms and need the inner form’s errors to reflect the parent’s validation state, please confirm whether you are injecting the parent veeValidate context; this determines whether you must manually propagate errors.