🙌 VeeValidate with Laravel validation errors
If you are looking for an easy module for showing Laravel validation errors, this package is for you.
*Prerequisites: vue >= 2.0.0 and vee-validate >= 2.1.0
Installation in 2 Steps*
💻 on NPM
1: Install the package npm i @pmochine/vee-validate-laravel
2: Add the package in your main.js
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from '@pmochine/vee-validate-laravel';
Vue.use(VeeValidate);
Vue.use(VeeValidateLaravel);
💪 How to use it
Somewhere in Laravel:
$request->validate([
'name' => 'required|min:3|max:255'
]);
Somewhere in Vue:
<template>
<div class="form-group" v-bind:class="{'has-error' : errors.has('name')}">
<label for="name">Name</label>
<input
type="text"
name="name"
class="form-control"
v-model="name"
v-validate="'required'" />
<div v-show="errors.has('name')" class="help-block">{{ errors.first('name') }}</div>
</div>
</template>
<script>
export default {
methods: {
doValidation() {
const data = {
name: this.name
};
axios.post('/example', data)
.then(res => {})
.catch(err => {
//adds errors to vee-validate errorBag and returns the errors as object
const errors = this.$addLaravelErrors(err.response);
if(errors){
alert(errors[Object.keys(errors)[0]]);
}
});
}
}
}
</script>
Security
If you discover any security related issues, please don't email me. I'm afraid
Credits
Now comes the best part!
Oh come on. You read everything?? If you liked it so far, hit the