Incorrect values in imported json in Vue.js

user_8816340 0
Viewed 175

I have a vuex store in which I have all the translations for the application. Translations are imported from a json file like this:

import en from '@/locales/en-US.json';

const question: Module<State, any> = {
  namespaced: true,
  state: {
    lang: en,
  }
}

Content of the JSON looks like this:

{
  "layout": {
    "sidebar": {
      "title": "Test"
    }
  }
}

But when I access the value of title I get this:

(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["Test"])}

Instead of Test

I'm guessing it might have something to do with webpack configuration but I'm not sure. Any help would be highly appreciated.

vue.js typescript json
2 Answers

It is because your file is precompiled by @intlify/vite-plugin-vue-i18n

See https://www.npmjs.com/package/@intlify/vite-plugin-vue-i18n/v/2.0.1

To overcome this issue specify a path for vite-plugin-vue-i18n.

export default defineConfig({
  plugins: [
    vue(), 
    vueI18n({
      // you need to set i18n resource including paths !
      include: path.resolve(__dirname, './path/to/src/locales/**')
    })
  ]
})
user_25729670

It is not clear from your question, but I suppose that you are using tm function.

Thus, as the docs state in the warning message you have to "... use rt for the locale message returned by tm. see the rt details."

Docs here further state that "rt differs from t in that it processes the locale message directly, not the key of the locale message. There is no internal fallback with rt. You need to understand and use the structure of the locale message returned by tm."

Thus, I suppose rt could help you by getting the translation value instead of the function.

user_52192770
Related