feat: support external configuration file for vue-i18n options

[rchl]

Added support for specifying path to local file for options passed to
vue-i18n (the vueI18n key of nuxt-i18n configuration). This allows
for configuration some options that have function type which previously
would fail due to stringifying and lack of possibility to import stuff.

Resolves #585, resolves #237

[codecov]

Codecov Report

Merging #605 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master   #605   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files           3      3           
  Lines         120    120           
  Branches       31     31           
=====================================
  Hits          120    120

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update fe0c163...cc103f8. Read the comment docs.

[janswist]

How to use it? I'm not actually quite sure how to implement it:

pluralizationRules: {
      'pl': function (choice, choicesLength) {
        if (choice === 0)
          return 2
        if (choice === 1)
          return 0
        if (choice > 1 && choice < 5)
          return 1
        if (choice >= 5)
          return 2
      }

[rchl]

@janswist See the comment above the vueI18n option - https://github.com/nuxt-community/nuxt-i18n/pull/605/files
It has an example on how to name the file and what to put into it.

If you are looking for an explanation of how to use pluralizationRules then it's not strictly related to this feature. Refer to its documentation: https://kazupon.github.io/vue-i18n/guide/pluralization.html#custom-pluralization

[janswist]

I created mentioned plugin like this:

// ~/plugins/vue-i18n.js
export default context => {
    return {
      pluralizationRules: {
        // example: years: 'rok | lata | lat'
        'pl': function (choice, choicesLength) {
          if (choice === 0)
            return 2 // 0 lat
          else if (choice === 1)
            return 0 // 1 rok
          else if (choice > 1 && choice < 5)
            return 1 // 2, 3 lub 4 lata
          else if (choice >= 5)
            return 2 // 5 lat
        }
      }
    }
  }

and tried adding:

// nuxt.config.js
export default {
  // tried this
  plugins: [ '~/plugins/vue-i18n.js' ],
  // ...and this (separately)
  i18n: {
    plugins: [ '~/plugins/vue-i18n.js' ],
  }
}

What am I doing wrong there?

[rchl]

You are supposed to assign the file name to the property where you would normally put object with vue-i18n settings. So like this if you have your nuxt-i18n settings in the root of nuxt config:

// nuxt.config.js
export default {
  i18n: {
    // other nuxt-i18n settings
    vueI18n: '~/plugins/vue-i18n.js',
}

And I would not call the file a "plugin" but rather a config and put it in a config directory, for example.

[janswist]

Thanks! Works perfectly now. Also thanks for a good tip - put it in the config directory already.

[f3l1x]

Here is my working solution for czech lang.

// nuxt.config.js
{
  // https://i18n.nuxtjs.org/options/
  i18n: {
    locales: [
      { code: 'cs', name: "CZ", file: 'cs.js' },
      { code: 'en', name: "EN", file: 'en.js' }
    ],
    defaultLocale: 'cs',
    lazy: true,
    langDir: "~/i18n/",
    detectBrowserLanguage: {
      onlyOnRoot: true,
      useCookie: true,
    },
    vueI18n: '~/config/i18n.js',
  }
}

// config/i18n.js
export default (context) => {
  return {
    fallbackLocale: "cs",
    pluralizationRules: {
      "cs": function (choice, choicesLength) {
        if (choice === 0) {
          return 0;
        }
        if (choice === 1) {
          return 1;
        }
        if (choice > 1 && choice <= 4) {
          return 2;
        }
        return 3;
      }
    }
  }
}

// i18n/cs.js
export default async () => {
  return {
    general: {
      yes: "Ano",
      no: "Ne"
    }
  }
}

[truesteps]

@f3l1x haha! I had the same issue, couldn't get czech to pluralize properly! Thanks for finding a solution!

[f3l1x]

Glad to help. ;-)

[VladBrok37]

not working for me in 2023

You are supposed to assign the file name to the property where you would normally put object with vue-i18n settings. So like this if you have your nuxt-i18n settings in the root of nuxt config:

// nuxt.config.js
export default {
  i18n: {
    // other nuxt-i18n settings
    vueI18n: '~/plugins/vue-i18n.js',
}

And I would not call the file a "plugin" but rather a config and put it in a config directory, for example.

[Asxer]

When I use this solution I'm getting

ERROR  Cannot restart nuxt:  'unknown' type in '/app/config/i18n.ts'.

What am I doing wrong? I tried to create this config in the plugins folder and tried to use js instead of ts but I'm still getting this error

[Prochy20]

When I use this solution I'm getting

ERROR  Cannot restart nuxt:  'unknown' type in '/app/config/i18n.ts'.

What am I doing wrong? I tried to create this config in the plugins folder and tried to use js instead of ts but I'm still getting this error

Same here...

[Max-Kucher]

Same here...

export default defineI18nConfig(() => ({
    fallbackLocale: 'ru',
    pluralRules: {
        ru: (choice, choicesLength, orgRule) => {
            if (choice === 0 || choice === 1) {
                return choice
            }

            if (choice > 1 && choice < 5) {
                return 2
            }

            return 0
        }
    }
}))

try this