kazupon / vue-i18n

:globe_with_meridians: Internationalization plugin for Vue.js
https://kazupon.github.io/vue-i18n/
MIT License
7.26k stars 860 forks source link

Allow use of modifiers on arguments #734

Open BenAlbin opened 4 years ago

BenAlbin commented 4 years ago

For example:

Desired text 1: "Creating user failed."

Desired text 2: "User successfully created."

Imagine there are multiple 'things' that could be created, and I don't want to write out translations for every one of them.

My current method:

translations:

"messages": {
  "createSuccess": "{thing} successfully created.",
  "createFailed": "Creating {thing} failed."
},
"things": {
  "user": {
    "lower": "user",
    "proper": "User"
  }
}

usage:

$t("messages.createSuccess", { thing:  $t("things.user.proper") })
$t("messages.createFailed", { thing: $t("things.user.lower") })

Desired translations:

...
"messages": {
  "createSuccess": ".proper:{thing} successfully created."
  "createFailed": "Creating .lower:{thing} failed."
}
"things": {
  "user": "user"
}
...

Using a custom modifier obviously for proper case.

I don't know what syntax would make sense.

This could be handled within templates, but it should really be the responsibility of the translations.

This seems like it could also be solved if we could link to arguments. For example:

"@.modifier:{thing}"

elioschmutz commented 4 years ago

Whats the state of this issue? I would love to have this feature 🌟

timyourivh commented 2 years ago

Will this ever be added or is it not possible?

decademoon commented 1 year ago

Your example of applying the modifiers in the JS code like $t("messages.createSuccess", { thing: $t("things.user.proper") }) is wrong; it should be done by the translator in the messages file because words can be moved around in different languages and you shouldn't hardcode the modifier at the $t call.

Something like this would be suitable:

# en_US.yaml
theApple: the apple
theDog: the dog
description: "{thing.capital} is red" # Let the translator do it
{{ $t('description', { thing: xxx }) }}
tofi86 commented 2 weeks ago

The docs for custom modifiers says:

You can use the interpolations (Named, List, and Literal) for the key of Linked messages.

However, all my tests fail to apply a custom modifier to a list item like this:

export default {
    message1: 'The error occured on @.customModifier:{0} in {1}',
    message2: 'The error occured on {0.customModifier} in {1}',
}

The second example (from this thread) doesn't work at all, the first one calls the customModifier, but doesn't pass a value.

Any advice on how to correctly apply the modifier to a list item?