Open Collective
Open Collective

Vue Formulate

The easiest way to build forms using Vue.

Contribute


Become a financial contributor.

Financial Contributions

Custom contribution
Donation
Make a custom one-time or recurring contribution.

Latest activity by


Top financial contributors

Organizations

1
Strapi

$10 USD since Mar 2022

Individuals

1
Milos Vujinic

$10 USD since Mar 2022

Vue Formulate is all of us

Our contributors 4

Thank you for supporting Vue Formulate.

Budget


Transparent and open finances.

View all transactions
Financial contribution to Vue Formulate

Credit from Milos Vujinic to Vue Formulate using a Gift Card from Strapi

+$10.00USD
Completed
Contribution #527523
$
Today’s balance

$9.00 USD

Total raised

$9.00 USD

Total disbursed

--.-- USD

Estimated annual budget

$10.00 USD

Connect


Let’s get the ball rolling!

News from Vue Formulate

Updates on our activities and progress.

Vue Formulate updates

All updates to Vue Formulate can be seen at the changelog on the official documentation site
Read more
Published on March 9, 2020 by Andrew Boyd

About


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.


Vue Formulate lets you:

✓ 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


How is Vue Formulate used?

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.


Comprehensive Documentation

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


Our team