@saroshali4/vee-validate-laravel

Vee Validate for Laravel backend validation

Simple vue js plugin that makes it easier to show validation errors from Laravel validation by using vee-validate.

Getting Started

In your script entry point:

import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VeeValidateLaravel from '@saroshali4/vee-validate-laravel';

Vue.use(VeeValidate);
Vue.use(VeeValidateLaravel);

From Laravel:

$request->validate([
    'name' => 'required|min:3|max:255'
]);

In Vue classes:

<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 => {
                    this.$setLaravelValidationErrorsFromResponse(err.response.data);
                });
            }
        }
    }
</script>