@pmochine/vee-validate-laravel NPM

🙌 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

⚠️ Combine this package with a global axios interceptor to get the most of it

Installation in 2 Steps*

1: Install the package 💻 on NPM

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>