custom validation message in vee-validate

Question

I am using Laravel - 5.8 with Vue.js. My question is about how to show a custom error message for a rule in the Vee-Validate library. My custom message for the "required" rule is not showing, and instead it reads: "The first_name field is required." The expected message is "Please enter first name."

Below code is in app.js

import { ValidationProvider } from 'vee-validate/dist/vee-validate.full';

This is my HTML component code.

<template>    
    <div>
        <form role="form">
            <ValidationProvider name="first_name" :rules="required">
                <div slot-scope="{ errors }">
                    <input v-model="profileForm.first_name" class="form-control">
                    <p>{{ errors[0] }}</p>
                </div>
            </ValidationProvider>
                  
            <button type="button" @click="validateBeforeSubmit()">Update Profile</button>
        </form>
    </div>
</template>

Below is my JS script code

<script>
    import { localize } from 'vee-validate/dist/vee-validate.full';
    import en from "vee-validate/dist/locale/en.json";

    export default {
        data() {
            return {
                profileForm: {
                    first_name: ''
                },
                customMessages: {
                    en: {
                        custom: {
                            'first_name': {
                                required: 'Please enter first name'
                            }
                        }
                    }
                },
            }
        },
        created() {
            localize("en", this.customMessages);
        },
        methods: {
            validateBeforeSubmit() {
                this.$validator.validateAll();
            }
        }
    }
</script>

Am I missing anything?

Answer 1

One way to do this generically, without attaching it to a specific language like with localize, is to use extend():

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

extend('required', {
    ...required,
    message: 'Please enter first name',
});

This will spread and include all the default properties of the rule, while still allowing you to add in your own custom message.

i18n Example:

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

extend('required', {
    ...required,
    message: i18n.t('LOCALIZATION_PATH'),
});

Answer 2

custom keyword has been removed in version 3. It is now replaced with fields. Also this info was missing in docs

For more info please follow this issue link on github