<template>
    <div>
        <form>
            <ValidationProvider rules="required" v-slot="{ errors }">
            <input type="text" v-model="nombre" name="nombre">
            <span>{{ errors[0] }}</span>
            </ValidationProvider>

            <ValidationProvider rules="min:3" v-slot="{ errors }">
            <input v-model="apellido" type="text" name="apellido">
            <span>{{ errors[0] }}</span>
            </ValidationProvider>
        </form>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { ValidationProvider, extend } from 'vee-validate';
    import * as rules from 'vee-validate/dist/rules';
    import { messages } from 'vee-validate/dist/locale/es.json';
    import { configure } from 'vee-validate';

    configure({
    classes: {
        valid: 'is-valid',
        invalid: 'is-invalid',
        dirty: ['is-dirty', 'is-dirty'], // multiple classes per flag!
        // ...
    }
    })

    Object.keys(rules).forEach(rule => {
        extend(rule, {
            ...rules[rule], // copies rule configuration
            message: messages[rule] // assign message
        });
    });

    Vue.component('ValidationProvider', ValidationProvider);

    export default {
        data(){
            return {
                nombre: '',
                apellido: ''
            }
        },
        methods: {

        },
        mounted(){

        }
        /*,
        components: {
            ValidationProvider
        }
        */
    }

</script>