A lightweight, schema-based validation composable for Vue 3. It takes a more holistic approach to asynchronous validation.

See the README for full details.

At a Glance

  • Schema-based. Import rules and structure, keeping the component lean
  • Flexible. Simply provide the validation composable with rules + values
    • no "black box" set up: use the component's data directly and provide rules elsewhere. Or:
    • lean: sweep away both rules and values into a schema config
  • Reactive. User input triggers validation updates and display
  • Extensible. Easy to override and add new rules
  • De-coupled. The reactive form-object can be injected directly into your actions
  • Agnostic. Can consume validation errors generated on either client or server
    • client-side: validators from Vuelidate are leveraged, sharing prior-art
    • server errors: may also be used to hydrate the validation composable. Uses the JSON error format by default


note: examples use `@input` to evaluate immediately. you may prefer to use @change

{{ form.username }}
{{ }}
{{ form.password }}
{{ form.samePassword }}

  • invalid: {{ form.$invalid}}
  • error: ({{ e.$property }}) {{ e.$message }}


Validatable draws inspiration from multiple sources.