Awesome

<p align="center"><a href="https://vueformulate.com" target="_blank" rel="noopener noreferrer"><img width="100" src="https://assets.wearebraid.com/vue-formulate/logo.png" alt="VueFormulate"></a></p> <p align="center"> <a href="https://travis-ci.org/wearebraid/vue-formulate"><img src="https://travis-ci.org/wearebraid/vue-formulate.svg?branch=master"></a> <a href="https://www.npmjs.com/package/@braid/vue-formulate"><img alt="npm" src="https://img.shields.io/npm/v/@braid/vue-formulate"></a> <a href="https://github.com/wearebraid/vue-formulate"><img alt="GitHub" src="https://img.shields.io/github/license/wearebraid/vue-formulate"></a> <a href=""><img src="https://img.badgesize.io/wearebraid/vue-formulate/master/dist/formulate.esm.js.svg?compression=gzip&label=gzip"></a> </p> <p align="center"> <a href="https://vueformulate.com">Documentation Website</a> </p>

🚀 Looking for Vue 3 support? Checkout FormKit — the best way to build forms with Vue 3.

What is Vue Formulate?

Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for live code examples and guidance on using Vue Formulate in your own projects.

<p align="center"><a href="https://vueformulate.com"><img src="https://assets.wearebraid.com/vue-formulate/read-the-docs.png" /></a></p> <table style="width: 100%;"> <tr> <th colspan="2"> <h3>Key features</h3> </th> <tr> <tr> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em">😎 Developer happiness</h4> <p>Forms are everywhere, yet surprisingly tedious to author — well, not anymore. Vue Formulate provides a <a href="https://vueformulate.com/guide/inputs/#all-options">powerful and flexible API</a> to developers that makes complex form creation a breeze.</p> </td> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em;">☝️ A single input element</h4> <p>With Vue Formulate you don't need to remember the names of a dozen components — all form elements are created with a <a href="https://vueformulate.com/guide/#inputs">single component</a>. Easy!</p> </td> </tr> <tr> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em">💪 Grouped fields</h4> <p>Vue Formulate ships with <a href="https://vueformulate.com/guide/inputs/types/group/#repeatable-groups">repeatable field groups</a> out of the box. Create complex UIs such as multi-person booking forms with ease.</p> </td> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em;">🎯 Built-in validation</h4> <p>Ridiculously easy <a href="https://vueformulate.com/guide/validation">validation</a> out-of-the-box to handle 95% of use-cases. Help text, validation rules, and validation messages are simple props. Need more? You can add custom validations too.</p> </td> </tr> <tr> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em">🔌 Plugin system</h4> <p>Extend Vue Formulate's functionality or reuse custom inputs, validation rules, and messages across projects by tapping into the <a href="https://vueformulate.com/guide/plugins/#creating-a-new-plugin">plugin system</a>. Make your plugin open source to share with others!</p> </td> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em;">✨ Generate forms</h4> <p><a href="https://vueformulate.com/guide/forms/#generating-forms">Generate an entire form</a> from JSON. Vue Formulate includes a schema to allow you to render complex forms from JSON with groups, wrappers, and custom components.</p> </td> </tr> <tr> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em">🎨 Styling Control</h4> <p>With provided <a href="https://vueformulate.com/guide/theming/customizing-classes/">class props</a> you can add your own set of style classes globally or on a case-by-case basis. Tailwind? No problem. Bootstrap? You're covered. Roll your own? Right on, it’s supported.</p> </td> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em;">🔍 Scoped Slots</h4> <p>Need even more control over your form’s markup? Vue Formulate ships with full <a href="https://vueformulate.com/guide/inputs/slots/">scoped slots</a> support so that you can globally or selectively provide your own markup.</p> </td> </tr> <tr> <td style="width: 50%; vertical-align: top;"> <h4 style="margin-top: 0.25em">🌐 Internationalization</h4> <p>Thanks to the wonderfully collaborative Vue community, Vue Formulate ships with support for <a href="https://vueformulate.com/guide/internationalization/">over a dozen languages</a> which are selectively importable to keep bundle size light.</p> </td> <td style="width: 50%; vertical-align: top;"> </td> </tr> </table>

These features and many more are covered thoroughly at the documentation website.

Contributing

Vue Formulate is and always will be free and open source. There are many ways available for you to contribute to Vue Formulate.

Core Codebase Contributors

This project exists thanks to all the people who volunteer their time to contribute

Localization Contributors

Vue Formulate is translated into different languages by volunteer native language speakers. Localizations are located in the Vue Formulate Internationalization repo.

License

MIT