Vuejs using MDBootstrap's custom input with Vee-validate

The vee-validate  directive is used as follows: [html] {{ errors.first(‘email) }} [/html] Essentially, vee-validate creates an array of validation errors via the ErrorBag wrapper class and you can access that array in your template and javascript. MDBoostrap provides a custom input component, and according to the docs , for it to work with v-model, the inside the component should:

• Bind the value attribute to a value prop - (check) you can pass in a value prop
• On input, emit its own custom input event with the new value - (check) it has a custom event called ‘input’ fired whenever the @change and @input events occur on the nested input tag

So combining the two you can change the html to this: [html] <md-input v-validate="‘required|email’" name=“email” label=“Email” icon=“envelope” :value=“email” @input=“email = $event” /> {{ errors.first(‘email’) }} [/html] The md-input component hasvalue, errorMsgandsuccessMsg props which I assumed could be used to display validation errors but at close inspection this is not the case. In the current version (v1.0.0), the props are not used in any meaningful way. So the best you can do to pass the validation error message to the component is by making use of the slot element. So the final result would be: [html] <md-input v-validate="’ required|email'" name=“email” label=“Email” icon=“envelope” :value=“email” @input=“email = $event”> {{ errors.first(‘email’) }} [/html] You can  checkout the example code on  github.