intlify / intlify/bundle-tools

[Unplugin-vue-i18n] Problem with translating nested keys (flat json)

Open
#498 1 comment 0 reactions 0 assignees View on GitHub
status: need more repro codes or info
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.