All skills
skilld-dev avatar

/vee-validate-skilld

@b9c39cb

Use when writing, reviewing, or debugging Vue.js forms that import vee-validate (useForm, defineField, useField, useFieldArray, Form, Field, FieldArray, ErrorMessage). Provides correct v4.15.x Composition API and component usage, validation schema patterns, typed-schema integration, version-specific API changes since 4.9, deprecations, and known pitfalls.

Use this Skill: https://skilld.dev/gh/skilld-dev/vue-ecosystem-skills/vee-validate-skilld

This session only. Nothing lands on disk.

referencespitfalls.md

≈912 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Pitfalls

Composition API caveats

Source: https://vee-validate.logaretm.com/v4/guide/composition-api/caveats/

  • Pass the field name as a getter when it can change: useField(() => props.name). Passing props.name directly loses reactivity when names are dynamic (array fields, generated forms). toRef, toRefs, and computed also work.
  • Destructured composables keep reactivity only if you destructure them. If you keep the whole object (const form = useForm()), wrap with reactive() for template auto-unwrapping; note writable computed refs like field.value then need .value in v-model.
  • defineField must run inside setup.

Nested paths and arrays

Source: https://vee-validate.logaretm.com/v4/guide/composition-api/nested-objects-and-arrays/

  • Dots create objects, [n] with a numeric n creates arrays. some.nested[0path] does not nest (not a number); some.nested[0].path does.
  • Escape with brackets to disable nesting: [user.name] is a literal key, useful for keys that contain dots or for APIs that send flat keys.
  • errors is always flat and keyed exactly like the field name, brackets included: errors['[user.name]'], errors['links[0].url'].
  • Key v-for over useFieldArray().fields by entry.key. The key is a stable id, not an index; never build field names from it.
  • Use keepValuesOnUnmount: true on useForm (or keepValueOnUnmount per field) for multi-step and tabbed forms where fields unmount; otherwise values are destroyed.
  • Writing to unregistered nested paths: mutate via setFieldValue so path state and validation are created for you.

Validation behavior

Known open issues (cite, do not restate as fixed)

Devtools

  • @vue/devtools-api ^7.5.2 is a runtime dependency (package.json:45); CJS interop errors with older bundler setups are tracked at https://github.com/logaretm/vee-validate/issues/4863
  • Devtools integration appears in Vue devtools; forms are identified by name when provided.

Source: SKILL.md on GitHub

No alerts8d3 checks · Risk SAFE
  • Gen Agent Trust Hub8d

    The vee-validate-skilld skill is a comprehensive documentation and reference suite for the vee-validate Vue.js form library. It contains API details, best practices, tutorials, and community discussions. No security risks or malicious behaviors were detected during analysis.

  • Socket8d

    No alerts

  • Snyk8d

    Risk: LOW · No issues

Signed by skilld at b9c39cb. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last week.

Activeupdated last week

README badge

README badge for skilld-dev/vue-ecosystem-skills/vee-validate-skilld