form-vue_skill

Overview

This skill provides production-ready Vue 3 form patterns built around VeeValidate (default) or Vuelidate, with first-class Zod integration. It targets Composition API projects and includes reusable components, field arrays, async checks, and cross-field validation patterns to speed up building robust forms.

How this skill works

Patterns use VeeValidate by default with the @vee-validate/zod adapter to convert Zod schemas into typed validation rules, wire up fields via useForm/useField, and expose errors, meta, and pending states. Vuelidate examples show an imperative alternative and include a small helper to reuse Zod schemas with Vuelidate. Reusable FormField components and field-array helpers demonstrate accessibility, ARIA attributes, and reset/initial-value flows.

When to use it

• Building Vue 3 apps with Composition API and typed validation
• When you want native Zod schema support and a declarative DX (VeeValidate)
• When you need fine-grained or imperative control over validation (Vuelidate)
• For forms requiring async checks (username availability) or cross-field rules (password confirmation)
• When you need reusable, accessible form field components and dynamic field arrays

Best practices

• Prefer VeeValidate + @vee-validate/zod for most new forms for lower friction and typed schemas
• Extract shared Zod schemas to a central module so they can be reused across frontends and components
• Use a FormField wrapper to centralize ARIA, error display, and visual states for consistency
• Leverage useFieldArray for dynamic lists instead of manual index management to preserve reactivity
• Keep async validation debounced and reflect meta.pending in the UI to avoid confusing flicker

Example use cases

• Login and registration forms with email/password validation and remember-me checkbox
• Profile edit forms with initial values and reset-to-original or reset-to-new functionality
• Sign-up flows that include async username availability checks
• Complex forms with password confirmation and other cross-field constraints
• Team or attendee lists implemented with dynamic field arrays (add/remove entries)