Andrew Boyd

Justin Schroeder

The easiest way to build forms using Vue.

Milos Vujinic

Open Source Collective

<div>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 <a href="https://vueformulate.com/">comprehensive documentation</a> for use within your own projects.The easiest way to build forms using Vue.<br /><br /><br /></div><h3>Vue Formulate lets you:</h3><div>✓ Create any input element with a single component<br />✓ Use v-model <a href="https://vueformulate.com/guide/#model-binding">binding</a> on fields and entire forms<br />✓ <a href="https://vueformulate.com/guide/forms/#setting-initial-values">Re-populate an entire form</a> from a single object<br />✓ <a href="https://vueformulate.com/guide/forms/#generating-forms">Generate a form</a> using JSON<br />✓ Easily add field labels<br />✓ Easily add help text<br />✓ Easily add <a href="https://vueformulate.com/guide/validation">form validation</a><br />✓ Easily add <a href="https://vueformulate.com/guide/validation/#custom-validation-rules">custom validation</a> rules<br />✓ Easily create custom <a href="https://vueformulate.com/guide/validation/#customize-validation-messages">validation messages</a><br />✓ Easily create <a href="https://vueformulate.com/guide/custom-inputs">custom inputs<br /></a><br /></div><div>There's a lot more available to read at the comprehensive <a href="https://vueformulate.com/">documentation website</a>.<br /><br /><strong>v-model an entire form<br /></strong><img src="https://opencollective-production.s3.us-west-1.amazonaws.com/b9168330-621f-11ea-b36c-6d78e59d0e26.gif" /><br /><br /><strong>Well-considered file uploads<br /></strong><img src="https://opencollective-production.s3.us-west-1.amazonaws.com/b8928620-621f-11ea-b36c-6d78e59d0e26.gif" /><br /><br /></div><h3>How is Vue Formulate used?</h3><div>The syntax is what developers would expect. To create an input you use the FormulateInput element and provide it with a few props:<br /><br /></div><pre>&lt;FormulateInput
  v-model="value"
  type="email"
  name="email"
  label="What is your email address"
  help="Where should we contact you?"
  validation="required|email"
/&gt;</pre><div><br /></div><div>Collecting multiple FormulateInput elements within a single FormulateForm element (even deeply nested) allows you to v-model your entire form.<br /><br /><br /></div><h3>Comprehensive Documentation</h3><div>There's a lot more available to read at the comprehensive <a href="https://vueformulate.com/">documentation website</a>.</div><div><br /><br /></div>

Vue Formulate

The easiest way to build forms using Vue.

Contributors

Vue Formulate is all of us

Our contributors 3

About

Our team