Add support for pluralization locales in component interpolation

[sebermann]

In order to avoid having to add markup to translations it would be helpful if component interpolation would also work for pluralization locales.

const messages = {
  en: {
    comments: 'No comments | {n} comment | {n} comments'
  }
}

<i18n path="comments" tag="p">
  <b place="n">{{ comments.length }}</b>
</i18n>

[WilliamDASILVA]

Hello,
It may be out of context but I was wondering how people handled pluralization with the component interpolation until now?

[ymhr]

What about an alternative implementation like:

<i18n path="some.path" :plural="3" />

It feels weird that there's some significant functionality in this library that you can't use if you're using the <i18n /> tag, unless I am missing something?

[WilliamDASILVA]

I don't mind making the PR for this, but if we could agree on the specs of this?
I like @ymhr proposal to add the plural count in props.

@kazupon Any opinions on that?

[arantes555]

IMHO, it would be better to have another component name, like $tc is different from $t. I wouldn't really mind if it were the same component though, the feature would still be nice to have 😄

[sense-it-gmbh]

Are there any updates on this? Im running into this problem quite often.

I really like the proposal of @arantes555

[ewohlken2]

As a workaround I'm currently handling interpolation + pluralization like this:

const messages = {
  en: {
    'comments': '{n} {comments-text}',
    'comments-plural': 'No comments | comment | comments',
  }
}

<i18n path="comments" tag="h1">
    <b v-if="comments.length !== 0" slot="n">{{ comments.length }}</b>
    <span slot="comments-text">{{$tc('comments-plural', comments.length)}}</span>
</i18n>

It's not ideal, if anyone has better solution please let me know

[mariomka]

Something new? It will be so useful.

[KonradDRAST]

@kazupon What do you mean by status: "Ready"? Is there a way to use pluralization in component interpolation?

[Magenta94]

Are you planning to release it soon? It's a useful feature

[dmitry]

I've made a bit simplier, rails way pluralization:

  // https://github.com/eemeli/make-plural/blob/master/packages/plurals/plurals.js
  const pluralizationRules = {
    en: function (n) {
      const s = String(n).split('.')
      const v0 = !s[1]
      return (n === 1 && v0 ? 'one' : 'other')
    },
    de: function (n) {
      const s = String(n).split('.')
      const v0 = !s[1]
      return (n === 1 && v0 ? 'one' : 'other')
    }
  }

  Vue.prototype.$t = function (key, ...values) {
    const i18n = this.$i18n

    const options = values[0] || {}

    if (Object.keys(options).includes('count')) {
      key = `${key}.${pluralizationRules[i18n.locale](options.count)}`
    }

    return i18n._t(key, i18n.locale, i18n._getMessages(), this, ...values)
  }

Usage:

$t('some.key', { count: count })

{
  some: {
    key: {
      "one": "One 1",
      "other": "Other %{count}"
    }
  }
}

[BlakeB415]

This is a very useful feature. Any ETA?

[dmitry]

@BlakeB415 https://github.com/intlify/vue-i18n-next

[nicooprat]

Docs: https://vue-i18n-next.intlify.dev/guide/advanced/component.html#pluralization-usage

Edit: https://vue-i18n.intlify.dev/guide/advanced/component.html#pluralization-usage

[kazupon]

we supported in Vue I18n v9.
please try it!

[roelvanhintum]

Late to the party, but nuxt i18n is still on v8 so here's another workaround:

<i18n :path="`some.key.${Math.min(2, count)}`">
  <template #count>
    <strong>{{ count }}</strong>
  </template>
</i18n>

module.exports = {
  some: {
    key: {
      0: '{count} equals none',
      1: '{count} equals one',
      2: '{count} equals more than one',
    },
  },
};