With VeeValidate, we will use VeeValidate's components to validate our HTML forms and Vue's scoped slots to expose the error messages. For example, this is a v-model input element that we are already familiar with:
<input v-model="username" type="text" />
If you want to validate it with VeeValidate, you just have to wrap the input with a <ValidationProvider> component:
<ValidationProvider name="message" rules="required" v-slot="{ errors }">
<input v-model="username" name="username" type="text" />
<span>{{ errors[0] }}</span>
</ValidationProvider>
In general, we use the <ValidationProvider> component to validate <input> elements. We can attach validation rules to this component using the rules attribute and display errors with the v-slot directive. Let's discover how you can make use of this plugin to speed...
