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
1: Install the package π» on NPM
npm i @pmochine/vee-validate-laravel
import Vue from 'vue'; import VeeValidate from 'vee-validate'; import VeeValidateLaravel from '@pmochine/vee-validate-laravel'; Vue.use(VeeValidate); Vue.use(VeeValidateLaravel);
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>
If you discover any security related issues, please don't email me. I'm afraid π±. avidofood@protonmail.com
Now comes the best part! π
Oh come on. You read everything?? If you liked it so far, hit the βοΈ button to give me a π€© face.