Vue Formulate

Vue Formulate is the easiest way to build forms using Vue. Key features include form and field validation, file uploads, form generation, single-element inputs that support labels, help text, error messages, placeholders and more, and comprehensive documentation for use within your own projects.The easiest way to build forms using Vue.

✓ Create any input element with a single component
✓ Use v-model binding on fields and entire forms
✓ Re-populate an entire form from a single object
✓ Generate a form using JSON
✓ Easily add field labels
✓ Easily add help text
✓ Easily add form validation
✓ Easily add custom validation rules
✓ Easily create custom validation messages
✓ Easily create custom inputs

There's a lot more available to read at the comprehensive documentation website.

v-model an entire form


Well-considered file uploads

The syntax is what developers would expect. To create an input you use the FormulateInput element and provide it with a few props:

<FormulateInput
  v-model="value"
  type="email"
  name="email"
  label="What is your email address"
  help="Where should we contact you?"
  validation="required|email"
/>

Collecting multiple FormulateInput elements within a single FormulateForm element (even deeply nested) allows you to v-model your entire form.

There's a lot more available to read at the comprehensive documentation website.