AvailableLocales option is not passed to global instance

[Angeart]

trafficstars

Reporting a bug?

AvailableLocales option (via createI18n) is not passed to the global instance without messages option. but createI18n is accepted availableLocales option by type of VueI18nOptions. Is it correct behavior?

Expected behavior

AvailableLocales option is passed to the global instance

Reproduction

Code

import { createI18n } from 'vue-i18n'

{
    const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        messages: {
            en: { hoge: 'hoge' },
            ja: { hoge: 'ほげ' }
        }
    })

    console.log("with messages: " + i18n.global.availableLocales)
}
{
    const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        availableLocales: ['en','ja']
    })

    console.log("without messages: " + i18n.global.availableLocales)
}

Result

"with messages: en,ja"
"without messages: ja"

Link

Runkit

System Info

System:
    OS: Linux 5.10 Ubuntu 22.04 LTS 22.04 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
    Memory: 11.62 GB / 15.60 GB
    Container: Yes
    Shell: 3.3.1 - /usr/bin/fish
  Binaries:
    Node: 16.17.0 - ~/n/bin/node
    Yarn: 1.22.19 - ~/n/bin/yarn
    npm: 8.15.0 - ~/n/bin/npm

Screenshot

No response

Additional context

I wanna use only <i18n></i18n> block without json or yaml language configs. So I expect that behavior.

Validations

• [X] Read the Contributing Guidelines
• [X] Read the Documentation
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion
• [X] The provided reproduction is a minimal reproducible example of the bug.

[Angeart]

Now I'm using messages option with an empty object as workaround. Like as

const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        messages: {
            en: {},
            ja: {}
        }
    })

But if createI18n still accepts availableLocales option, I guess should fix that behavior.

[kazupon]

Thank you for your feedback!

sorry, poor vue-i18n API docs.

availableLocales API docs is here: https://vue-i18n.intlify.dev/api/composition.html#composer

availableLocales is read only, so we can set to it.

availableLocales calculates valid locale from the locale option and the messages option. So, in your workaround code,

const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        messages: {
            en: {},
            ja: {}
        }
    })

you can use availableLocales will work correctly.

A reason for which availableLocales is provided is, for example, a case where you want to load message resources using lazy load. By using availableLocales in advance, the difference between the locales supported by the application and the locale from which the message resource is not loaded can be calculated.

[kazupon]

We need to improve vue-i18n docs

[nikita-rudenko]

My idea is to set availableLocales on the createI18n() stage, so later I can use availableLocales to render a language picker, for example, and lazy load other locale resources on demand. @kazupon as far as I understood from your comment above, it's the use case of availableLocales. However, it doesn't work for me.

This snippet doesn't set availableLocales in advance for me as expected:

    const i18n = createI18n({
        legacy: false,
        locale: 'ja',
        availableLocales: ['en', 'ja']
    })

I use almost identical code to the Lazy Loading guide.

I ended up having this workaround:

  const i18n = createI18n({
    legacy: false,
    locale: 'ja',
    messages: {
            en: {},
            ja: {}
        }
  });