Use VeeValidate v4 common validators with cutomize error message

Question

I am trying to use the common validators provided by @vee-validate/rules, it works well but I can't find the way to customize the error message. Now my error message is : "CompanyName is not valid. " But I want to change the field name from "CompanyName" to "Company name" and change "is not valid" to something related to the rule like "is required".

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'

createApp(App).use(router).use(i18n).mount('#app')

import { defineRule } from 'vee-validate';
import AllRules from '@vee-validate/rules';
Object.keys(AllRules).forEach(rule => {
  defineRule(rule, AllRules[rule]);
});

vue file

<template>
<Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }">
      <div class="form-group">
        <span class="lblSectionField">Company Name <span class="lblMandatory">*</span></span>
        <Field name="CompanyName" class="form-control"/>
        <span class="errorMsg">{{ errors.CompanyName }}</span>
      </div>
<Form>
</template>
<script setup>
  import { Form, Field } from 'vee-validate';
  const schema = {
    CompanyName: 'required',
  };
  </script>

Answer 1

I found the solution

<script setup>
import { localize } from '@vee-validate/i18n';
import { Form, Field, configure  } from 'vee-validate';

localize('en', {
  fields: {
    CompanyName: {
      required: 'Company name is required',
    },
  },
});

  const schema = {
    CompanyName: 'required',
  };
  
  
</script>