Skip to content

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

@nao237854

Description

@nao237854

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

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

  • Read the Contributing Guidelines.
  • Read the README
  • 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 Discussion.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions