nuxt / ui

A UI Library for Modern Web Apps, powered by Vue & Tailwind CSS.

Home Page:https://ui.nuxt.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Problem with error message translations if use valibot in form

ncodealex opened this issue · comments

Environment

  • Node Version: v20.11.1
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: pnpm@8.15.6
  • Builder: -
  • User Config: telemetry, ssr, app, spaLoadingTemplate, extends, css, modules, ui, i18n, devtools, devServer
  • Runtime Modules: @nuxt/ui@2.16.0, @nuxt/fonts@0.6.1, @vueuse/nuxt@10.9.0, nuxt-lodash@2.5.3, @nuxtjs/i18n@8.3.1, @pinia/nuxt@0.5.1, nuxt-zod-i18n@1.7.0
  • Build Modules: -

Version

v2.16.0

Reproduction

https://stackblitz.com/edit/nuxt-starter-cf4613?file=app.vue

Description

Hello! 👋 Thanks for package!
I very likes use Nuxt Ui / Pro in my projects !

I use valibot in forms and set globally translation. ( please see reproduction )

Expected behavior: after set globally translation language in valibot, issues message shows in set globally lang
Actual behavior: issues message shows in default language "en"

Under the hood we used ._parse method

#https://github.com/nuxt/ui/blob/main/src/runtime/components/forms/Form.vue

Please see string 263.

fabian-hiller says:

._parse is an internal API and should not be used directly. If you parse your schema with parse or safeParse, it should work as expected: https://valibot.dev/guides/parse-data/

For this reason we don't get messages with current translation.

Issue in valibot repo: https://github.com/fabian-hiller/valibot/issues/576

Please help with this problem, or if need i can try solve this problem and send new pull request!

Additional context

No response

Logs

No response

Tagging @fabian-hiller for feedback

Short explanation: Valibot captures the configuration when calling parse and safeParse and then passes it to ._parse. Since ._parse is called directly, the global configuration is probably ignored. I am happy to help with any questions.