Combining both pluralisation and number/currency formatting?

[mjog]

Hi, I have a number of scenarios where I'd like to combine both pluralisation and number/currency formatting. E.g.:

You have 0 units remaining
You have 1 unit remaining
You have 100,000 units remaining

And:

$1/kg
$1,000/kg

I can't work out how to do this however - I can't nest $t('msg.units', $n(100000)), since the number will be formatted as a string and may not be re-parseable.

Is there a way to specify a number format in the message format? Something like:

msg {
  units: "You have 0 units remaining | You have 1 unit remaining | You have {$n(n)} units remaining"
}

[kazupon]

You can solve this using the $t and $n API.

message:

{
  "msg": {
    "units": "You have 0 units remaining | You have 1 unit remaining | You have {unit} units remaining"
  }
}

usage example:

$t('msg.units', 100000, { named: { unit: $n(100000) } })

about $t API details:
https://vue-i18n.intlify.dev/api/injection.html#t-key-plural-options

[mjog]

Thank you! That works here.

Two things I'd note however:

1. Following the link you provide above, there is a broken link: In the text: "An options, see the TranslateOptions", where TranslateOptions is a link, the link is broken. In fact, I couldn't find docs anywhere for that object, which may be the cause of not being able to work the solution out myself. :)
2. The solution is quite complex, in that the value has to be specified twice, and two extra symbols introduced. I have had to use something along the lines the following a number of times in templates when using it:

 {{ $t("msg.tons", equipment.designMass / 1000, { named: { tons: $n(equipment.designMass / 1000) } }) }}

It's a lot of duplication and overhead - twice as long as just using a simple $t() call. It also more tightly couples the formatting message to the function invocation - you need to know not just what the message name is, but also what the named parameter is called, and translators also need to look up the value of the extra parameter.

As such please consider this a feature request to support embedding the number format in the message string somehow, perhaps using the message format syntax example I gave above, since it means the message format contains all the information that translators need, and the invocation in the template returns to being a simple $t() call.

[kazupon]

Thank you for your feedback! :)

vue-i18n message format and API stills need to be improved.
In the future, we plan to extend it to ICU-like and compatible message format and make the API easier to use.