About

[![](https://img.shields.io/npm/v/formvuelar.svg?label=version)](https://www.npmjs.com/package/formvuelar) [![](https://img.shields.io/npm/dm/formvuelar.svg)](https://npmcharts.com/compare/formvuelar?minimal=true) [![](https://badgen.net/bundlephobia/minzip/formvuelar?label=Size&color=38A89D)](https://bundlephobia.com/result?p=formvuelar) ![](https://img.shields.io/github/forks/janiskelemen/formvuelar.svg) ![](https://img.shields.io/github/license/janiskelemen/formvuelar.svg)

FormVuelar is a set of Vue 3 form components designed to automatically display errors coming back from your backend. It works out of the box with the error message bag Laravel returns when submitting an AJAX form.

Examples

Give it a try! ## Documentation [Full Documentation](https://formvuelar.netlify.com)

Features

- Works out of the box with Laravel - Axios integration - Select with search and remote source option - Nested Checkboxes - File upload support including progress indication - Image upload with image preview - Dropzone with image preview (inspired by FilePond) - Display validation error messages from error response - Supports Tree Shaking (adds only used components to your js bundle)

Getting Started

```bash npm install formvuelar --save ``` FormVuelar 2 targets Vue 3. Vue 2 projects should stay on the maintained 1.x release: ```bash npm install formvuelar@1.8.15 --save ``` Import components and the bundled styles: ```js import { FvlForm, FvlInput, FvlSubmit } from 'formvuelar' import 'formvuelar/style.css' ``` All primary control values use Vue 3's default `v-model`: ```vue

Save

``` See the [Vue 3 migration guide](docs/vue-3-migration.md) for the complete binding map. ## Credits - [Janis Kelemen](https://twitter.com/janiskelemen) - [Helpspace.com](https://helpspace.com)

License

Released under the MIT License.