Vue form components with server side validation in mind

About

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

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

npm install formvuelar --save

FormVuelar 2 targets Vue 3. Vue 2 projects should stay on the maintained 1.x release:

npm install formvuelar@1.8.15 --save

Import components and the bundled styles:

import { FvlForm, FvlInput, FvlSubmit } from 'formvuelar'
import 'formvuelar/style.css'

All primary control values use Vue 3's default v-model:

<fvl-form :data="form" url="/users">
  <fvl-input v-model="form.name" name="name" label="Name" />
  <fvl-submit>Save</fvl-submit>
</fvl-form>

See the Vue 3 migration guide for the complete binding map.

Credits

• Janis Kelemen
• Helpspace.com

License

Released under the MIT License.