Inconsistent behaviour with $te and $t regarding nested message notation

[Lehren]

Reporting a bug?

Hi, I've noticed that $te will not see a translation exists if the message key contains periods and it is not in nested form in the messages object, but $t will translate the message correctly regardless.
Example:

messages: {
"example.message": "Example message"
}

$te('example.message') : false
$t('example.message'): 'Example message'

Expected behavior

$te should see the message exists if it exists in the messages object, because clearly it can be translated correctly anyway by $t

Reproduction

Code sandbox

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 784.07 MB / 2.01 GB
    Container: Yes
    Shell: Unknown
  Binaries:
    Node: 20.9.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.8.1 - /usr/local/bin/npm
    pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.6 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.6 
    @vue/cli-service: ~4.5.0 => 4.5.6 
    @vue/compiler-sfc: ^3.0.0-0 => 3.0.0 
    vue: 3.2.45 => 3.2.45 
    vue-i18n: 9.9.0 => 9.9.0

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussions

[dg-mann]

Hi @Lehren,

there are two things i figured out:

1. $te is checking in the default 'en-US' locale where no translation is defined. Similarly, $t also checks 'en-US' but will use the fallback 'en' if no translation is found. To resolve this, you could set the locale to 'en'
2. Additionally, $te won't work with the flat key annotation like "example.message" unless you set flatJson to true. So the resulting snippet is:

const i18n = createI18n({
  locale: "en",
  flatJson: true,
  messages: {
    en: {
      "example.message": "Example message",
    },
  },
});

Hope that helps!

[kazupon]

Thank you for your reporting!

As already mentioned, If you want to use keys in object path format, you must specify flatJson: true to createI18n. That will flatten the message inside vue-i18n.

Thanks