Search code examples
vuejs3internationalization

Vue i18n pluralization with multiple parameters

Hi I'm using i18n internationalization in my Vue app. It works for simple statements without any additional parameters but when I have additional parameters it doesn't seem to register them at all. For example, in my locale I have the following messages:

en: {
  message: {
    imageMessage: "1 image downloaded on {date} ({space} Mb) | {n} images downloaded on {date} ({space} Mb)"
  }
}

Here date and space are the additional parameters, not related to pluralization. In my vue template I have the following code:


$t('message.imageMessage', images.num, {date: images.date, space: images.space})

The messages that end up getting printed are either: 1 image downloaded on ( Mb) or of the form: 5 images downloaded on ( Mb)

Is there a way to have these additional parameters printed in the messages as well?

I tried some other stopgap solutions that included conditional statements that were able to achieve this but was wondering if there was a way to achieve this without any additional logic.

Solution

  • the problem here is that the order of parameters for calling $t is changed.

    Instead of:

    $t('message.imageMessage', images.num, {date: images.date, space: images.space})

    You need to pass them as:

    $t('message.imageMessage', {date: images.date, space: images.space}, images.num)

    Here you have the documentation for vue-i18n v9: https://vue-i18n.intlify.dev/guide/advanced/composition#pluralization