I have a Vue.js App (with Vite) where I use Vee-validate with Yup for form validation and use i18n for message translation. However, the custom errors in the schema do not update in real time when the user sets $i18n.locale='xx'
Schema:
import { useI18n } from "vue-i18n"
const {t} = useI18n()
const schema = yup.object().shape({
username: yup
.string()
.required(t("field_required"))
.email(t("field_error_email")),
password: yup.string().required(t("field_required"))
})
Messages printed directly to the template with $t("message") work normally.
Versions:
"dependencies": {
"vee-validate": "^4.5.11",
"vue": "^3.2.33",
"vue-i18n": "^9.1.9",
"yup": "^0.32.11"
}
t("field_required") is passed as a string during component setup, it cannot be reactive. In order to be reactive, it should be evaluated at the time when a message really needs to be accessed, i.e. during schema validation. It's expected that required, etc schema methods accept a function to evaluate a message lazily for this purpose, and they actually do.
It should be:
const schema = yup.object().shape({
username: yup
.string()
.required(() => t("field_required"))
...