intlify / vue-i18n

Vue I18n for Vue 3

Home Page:https://vue-i18n.intlify.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Modifiers for interpolated values

lnvglr opened this issue · comments

Clear and concise description of the problem

Lets say you want to translate "Passenger" as well as "Remove passenger". And let's say passengers are not the only thing you want to remove (i.e. images, links etc.).

Currently, what you have to do (it seems), is to add a source key for every scenario:

{
  "passenger": "Passenger",
  "image": "Image",
  "link": "Link",
  "remove.passenger": "Remove @.lower:passenger",
  "remove.image": "Remove @.lower:image",
  "remove.link": "Remove @.lower:link"
}

And you would use it like so: $t("remove.passenger").
But that seems awfully redundant!

Suggested solution

What if, instead, you could lowercase interpolated strings.

{
  "remove": "Remove @.lower:{value}",
  "passenger": "Passenger",
  "image": "Image",
  "link": "Link",
}

And you would use it like so $t("remove", { value: $t("passenger") } )

Alternative

No response

Additional context

This would open up endless possibilities, especially for custom modifiers

Validations