javascriptvue.jsyupvitevue-i18n

Problems with translations with Vue, Yup and i18n

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"
}
Solution

  • 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"))
    ...