How to redefine a Vee Validate error message for one Vue component?

Question

I have a global validation rule, for example:

import { extend } from 'vee-validate';
import { required } from 'vee-validate/dist/rules';

extend('required', {
  ...required,
  message: 'Please fill the field'
});

This rule is using for all Vue components across the project. But for one exact component I need to redefine the message Please fill the field to another one. Is it possible to change the message just for one Vue component?

Conclusion

Answer 1

You can specifiy specific messages for each ValidationProvider component using the custom-messages prop

<ValidationProvider rules="required" :custom-messages="{ required: 'required message' }">
  <!-- ... -->
</ValidationProvider>

You can extract it on a data prop and use it for the providers in your component:

<template>
  <ValidationProvider rules="required" :custom-messages="customMessages">
    <!-- ... -->
  </ValidationProvider>

  <ValidationProvider rules="required" :custom-messages="customMessages">
    <!-- ... -->
  </ValidationProvider>
</template>

<script>
export default {
 // ....
 data: () => ({
    customMessages: {
      required: 'custom message'
    }
  }),
  // ...
};
</script>

Pacifa

your solution is working well with required but not working in my case would you please help me <ValidationProvider name="Charges" :vid="Unauthorised Overrun Charges" rules="required|decimal_validator_common:10,2,nodecimal" v-slot="{ errors }" :custom-messages="{ decimal_validator_common: 'sachin message', required:'dsklfjs' }"> – Danieledaniell