Skip to content

@valibot/i18n not working with vee-validate #4940

@Sector6759

Description

@Sector6759

What happened?

In my main.ts I did the following, according to the Valibot docs:

import * as v from 'valibot'
import '@valibot/i18n/de'
v.setGlobalConfig({ lang: 'de' })

If I call v.parse() manually, the localized messages do work, but when I do the validation with vee-validate, by submitting a form, the destructured errors property from useForm() does not include the localized messages.

Reproduction steps

  1. Install the required npm packages, and make sure to lock the Valibot package to 1.0.0-beta.1, 1.0.0-beta.2 or 1.0.0-beta.3, as at least 1.0.0-beta.1 is required for @valibot/i18n, but anything above 1.0.0-beta.3 breaks toTypedSchema
  2. Import the Valibot i18n package and set the language as described above
  3. Create a schema
  4. Call const { handleSubmit } = useForm({ validationSchema: toTypedSchema(Schema) })
  5. Call const onSubmit = handleSubmit(() => {})
  6. Create a form <form @submit.prevent="onSubmit">...</form> with elements rendering the errors
  7. Start the dev server and input any data into the form that leads to a validation error
  8. Observe the messages still being in English

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

No response

Demo link

None

Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    🐛 bugUnintended behavior

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions