Inconsistent behaviour with $te and $t regarding nested message notation
Lehren opened this issue · comments
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
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
Hi @Lehren,
there are two things i figured out:
- $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'
- 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!
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