[Feature request] - Override of the getChoiceIndex function should be available via options object on initialization

I use vue-i18n via another lib nuxt-i18n so I doesn’t have direct access to the library to override getChoiceIndex method in a clean way as it described in the documentation and my personal opinion is that it looks dirty to to this at all. Instead, what I like is to be able to do override this method via default vue-i18n config object. The syntax is pretty simple:

new VueI18n({
  locale: 'pl', // set locale
  getChoiceIndex(choice, choicesLength) {
     // Custom pluralization code goes here
  }
})

so when using nuxt-i18n module I can simply do:

modules: [ ['nuxt-i18n', {
locales: [...], 
vueI18n: {
   getChoiceIndex(choice, choicesLength) {
     // Custom pluralization code goes here
  }
}
}]]

I think such approach is much more cleaner to use!

[bludnic]

No need to override VueI18n.prototype.getChoiceIndex . Update nuxt and vue-i18n to latest version, and use pluralizationRules option.

$ npm i --save nuxt@2.6.2
$ npm i --save vue-i18n@8.10.0

plugins/i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function slavicPluralization (choice, choicesLength) {
  if (choice === 0) {
    return 0
  }

  const teen = choice > 10 && choice < 20
  const endsWithOne = choice % 10 === 1

  if (!teen && endsWithOne) {
    return 1
  }

  if (!teen && choice % 10 >= 2 && choice % 10 <= 4) {
    return 2
  }

  return (choicesLength < 4) ? 2 : 3
}

export default ({ app, store }) => {
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'),
      'ru': require('~/locales/ru.json')
    },
    pluralizationRules: {
      ru: slavicPluralization
    }
  })
}

nuxt.config.js

plugins: [
  '~/plugins/i18n.js'
]

[lukaVarga]

Ok so upon some further digging, the problem is not in vue-i18n but rather in nuxt-i18n. As you can see here, nuxt-i18n takes the vueI18n options and stringifies them using JSON.stringify. That causes the functions to be removed and just returns an object pluralizationRules: {}.

So here’s a nice workaround. Instead of adding pluralizationRules within vueI18n options, you can add a plugin:

export default ({ app }) => {
  app.i18n.pluralizationRules = {
    sl: slovenePluralization
  };
}

function slovenePluralization(number, choicesLength) {
  let option = null;

  if (number === 0) {
    option = 3;
  }

  if (number % 100 === 1) {
    option = 0;
  }

  if (number % 100 === 2) {
    option = 1;
  }

  if (number % 100 === 3 || number % 100 === 4) {
    option = 2;
  }

  if (option === null) {
    option = 3;
  }

  return option > choicesLength ? choicesLength : option;
}

and then you just have to register the plugin with ssr: true:

// nuxt.config.js

module.exports = {
  ...
  plugins: [
    { src: '~plugins/pluralization.js', ssr: true }
    ],
  ...
};

That way it works for SSR as well 😃

Hope that helps. cc @fibigerg @AndrewBogdanovTSS