intlify / intlify/bundle-tools
[Unplugin-vue-i18n] Problem with translating nested keys (flat json)
- Dominant language
- TypeScript
- Stars
- 270
- Forks
- 46
- PR merge metrics
- No merged PRs in 30d
Description
### Reporting a bug?
Hi,
I'm having trouble translating nested keys.
I have two keys: "navBar.orders" and "navBar.orders.buy." "navBar.orders" translates properly, but "navBar.orders.buy" doesn't.
However, when I change "navBar.orders" to "navBar.orders.orders," "navBar.orders.buy" translates correctly.
Is this intentional? Everything works well without the unplugin-vue-i18n.
en.json
```
"navBar.orders": "Test",
"navBar.orders.buy": "Test2",
```
```
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
console.log(i18n.t('navBar.orders')) // Test
console.log(i18n.t('navBar.orders.buy')) //navBar.orders.buy
```
----------------------------------------
en.json
```
"navBar.orders.orders": "Test",
"navBar.orders.buy": "Test2",
```
```
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
console.log(i18n.t('navBar.orders.orders')) // Test
console.log(i18n.t('navBar.orders.buy')) // Test2
```
### Expected behavior
```
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
console.log(i18n.t('navBar.orders')) // Test
console.log(i18n.t('navBar.orders.buy')) //Test2
```
### Reproduction
i18n.ts
```
import { createI18n } from 'vue-i18n'
import messages from '@intlify/unplugin-vue-i18n/messages'
const i18n = createI18n({
legacy: false,
locale: 'pl',
fallbackLocale: 'pl',
messages,
flatJson: true,
warnHtmlInMessage: 'off',
globalInjection: true,
});
```
vite.config.ts
```
VueI18nPlugin({
/* options */
// locale messages resource pre-compile option
include: resolve(dirname(fileURLToPath(import.meta.url)), 'src/locales/**'),
strictMessage: false,
escapeHtml: true,
dropMessageCompiler: true,
}),
```
en.json
```
"navBar.orders": "Test",
"navBar.orders.buy": "Test2",
```
```
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
console.log(i18n.t('navBar.orders')) // Test
console.log(i18n.t('navBar.orders.buy')) //navBar.orders.buy
```
### Issue Package
unplugin-vue-i18n
### System Info
```shell
System:
OS: Linux 6.6 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700K
Memory: 26.77 GB / 31.22 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 24.3.0 - ~/.nvm/versions/node/v24.3.0/bin/node
npm: 11.4.2 - ~/.nvm/versions/node/v24.3.0/bin/npm
npmPackages:
rolldown-vite: 7.0.5
vue: ^3.5.17 => 3.5.17
vue-i18n: ^11.1.9 => 11.1.9
```
### Screenshot
_No response_
### Additional context
_No response_
### Validations
- [x] Read the [Contributing Guidelines](https://github.com/intlify/bundle-tools/blob/main/CONTRIBUTING.md).
- [x] Read the README
- [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](https://github.com/intlify/bundle-tools/discussions).
Contributor guide
Assessment
This issue has not been assessed yet.