I want it to automatically replace the vee-validate error messages with i18n and the messages in the tr package, but when I set setLocale, it does not translate. How can I do this?
I want to use language packs in localization rather than write translations for required or other features.
I'm sorry that there may be places wrongly written in my code. my codes.
<template>
<div
class="TextInput"
:class="{ 'has-error': !!errorMessage, success: meta.valid }"
>
<label :for="name">{{ label }}</label>
<InputText
:name="name"
:type="type"
:id="name"
:value="inputValue"
:placeholder="placeholder"
@input="handleChange"
@change="handleChangeModal"
@blur="handleBlur"
v-bind="$attrs"
/>
<p class="help-message" v-show="errorMessage || meta.valid">
{{ errorMessage || successMessage }}
</p>
</div>
</template>
<script>
import { useField } from "vee-validate";
import { configure } from 'vee-validate';
import { localize,setLocale } from '@vee-validate/i18n';
import en from '@vee-validate/i18n/dist/locale/en.json';
import tr from '@vee-validate/i18n/dist/locale/tr.json';
export default {
props: {
type: {
type: String,
default: "text",
},
modelValue:String,
value: {
type: String,
default: "",
},
name: {
type: String,
required: true,
},
label: {
type: String,
required: true,
},
successMessage: {
type: String,
default: "",
},
placeholder: {
type: String,
default: "",
},
},
emits: ['update:modelValue'],
setup(props,{emit}) {
const handleChangeModal = (event) =>{
emit('update:modelValue', event.target.value);
}
const {
value:inputValue,
errorMessage,
handleBlur,
handleChange,
meta,
} = useField(props.name, undefined, {
initialValue: props.value,
});
configure({
generateMessage: localize({
en,
tr,
}),
});
setLocale('tr');
return {
handleChange,
handleBlur,
errorMessage,
meta,
inputValue,
handleChangeModal
};
},
};
</script>