intlify/vue-i18n

Interpolations without provided value should remain in the translation result

rubenduiveman opened this issue · 5 comments

Clear and concise description of the problem

We're upgrading to v9.x. When translating a string, we want to perform some extra logic on the result, using special tags {tag} to be replaced in the translated result. In V8, the translated value still contained those values, but in V9 it doesn't anymore.

Input: { val: "I am a special {tag} string" }, calling t("val").
V8 result: I am a special {tag} string
V9 result: I am a special string

Suggested solution

Let's add an option to createI18n to toggle between those behaviors globally if it's not there.

Alternative

No response

Additional context

No response

Validations

Currently missing exactly this behaviour.

E.g.: with the following translation key:

en:
  form.validations.xxx: '{label} should be at least {min} characters'

In combination with Zod for validation:

message: i18n.t("form.validations.xxx", {
  min: issue.minimum
})

The actual outcome is: should be at least 1 characters,
Whereas I expect to find {label} should be at least 1 characters, for re-use later on like so:

{{ t(errorMessage, {label, name, inputValue}, {resolvedMessage: true}) }

My current work around is to manually map the missing keys back to their respective placeholders:

message: i18n.t("form.validations.xxx", {
  min: issue.minimum,
  label: '{label}',
  name: '{name}',
  inputValue: '{inputValue}'
})