FormVuelar is a set of predefined vue form components which are designed to automatically display errors coming back from your backend. It works out of the box with the error message bag that is returned by Laravel when submitting an ajax form.
Features:
- Works out of the box with Laravel
- Axios integration
- Select with search
- File upload support including process indicator
- Dropzone with image preview (inspired by FilePond)
- Display validation error messages from error response
Install
Install form validation component via NPM
npm install formvuelar --save
|
Template
Create a form and sent it via post request to your server.
-- form wrapper --> |
The form object you pass into the form component above would look like this:
import { FvlForm, FvlInput, FvlTextarea, FvlRadio, FvlSubmit } from 'formvuelar' //... components: { FvlForm, FvlInput, FvlTextarea, FvlRadio, FvlSubmit, }, data() { return { form: { fullname: '', bio: '', pet: '' }, //... |
You might want to change some defaults globally for all your forms, to do this you just can overwrite them as a global property before registering your main vue instance:
/* Register optional global FormVuelar config */ Vue.prototype.$formvuelar = { noResultsText: 'No results found!', pleaseWaitText: 'Please wait...', addFileText: 'Add File', addFilesText: 'Add Files', filesSelectedText: 'Files Selected', dropFilesHereText: 'Drop files here or click to upload.', filesSelectedAndSizeText: 'files selected with a combined size of', headers: '{}' } |
The following components are shipped with FormVuelar:
| Name | Description | Import Name |
|---|---|---|
|
Form wrapper element | import { FvlForm } from 'formvuelar' |
|
Input field | import { FvlInput } from 'formvuelar' |
|
Text area field | import { FvlTextarea } from 'formvuelar' |
|
Radio input field | import { FvlRadio } from 'formvuelar' |
|
Check box input field | import { FvlCheckbox } from 'formvuelar' |
|
Select input field | import { FvlSelect } from 'formvuelar' |
|
Select with search | import { FvlSearchSelect } from 'formvuelar' |
|
File input field | import { FvlFile } from 'formvuelar' |
|
Multi file input field | import { FvlMultiFile } from 'formvuelar' |
|
Dropzone field | import { FvlDropzone } from 'formvuelar' |
|
Submit button | import { FvlSubmit } from 'formvuelar' |
See live demo and download source code.
This awesome plugin is developed by janiskelemen. Visit their official github repository for more information and follow for future updates.