Vee-validate: Ability to set local error messages for Validation Provider

[trevorgehman]

Is your feature request related to a problem? Please describe.

With a large app, it's often necessary to create custom error messages for specific fields. My understanding is that when I update the dictionary, it is set globally:

Conversely, a poor choice would be a child component lifecycle hook like mounted since the validator dictionary is kept globally for all instances.

https://baianat.github.io/vee-validate/guide/messages.html#field-specific-custom-messages

The problem with this is I have to make sure there is no overlap between field names throughout the entire app in order to set custom messages. Additionally, sometimes I would like to be able to set an error message within a component, if it is tightly coupled to that component.

Describe the solution you'd like

I exclusively use the Validation Observer and Validation Provider components. I don't see any way in the documentation to set a custom error message for just a single Provider component. I think my use-case makes sense.

So, I think a prop with custom error messages dictionary may be a good solution. Something like:

const messages = {
  en: {
      required: 'You must agree to the terms',
   }
};
<ValidationProvider :error-messages="messages" />

Describe alternatives you've considered
Just setting the error messages in the HTML is a good alternative, as suggested here: https://github.com/baianat/vee-validate/issues/2071#issuecomment-492945644.

However, then I imagine you lose the ability to do localization.

[logaretm]

Using failedRules with VueI18n would work fine as a workaround, something like this:

<ValidationProvider rules="required|email" name="field">
  <div slot-scope="{ errors, failedRules }">
    <input type="text" v-model="value">
    <span v-if="failedRules.required">{{ $t('validation.required') }}</span>
    <span v-if="failedRules.email">{{ $t('validation.email') }}</span>
  </div>
</ValidationProvider>

I think this coupled with the VueI18n loader would tightly implement what you need.

I will probably re-think how the i18n would work in v3 since the dictionary approach isn't very flexible with VueI18n or any external i18n engine.