vue3: i18n plugin won't find localization in json file

Question

I am trying to setup a vue3 app with i18n localization. The localization is supposed to be located in json files. I added i18n via vue add i18n to my project. The questions asked during installation were all answered with the default value except the one with the legacy support (my answer: no). When i try to use a text from a json file, it will tell me in the console [intlify] Not found 'message' key in 'en' locale messages. The local translations work just fine. And i have no clue why it is not working with the translations provided in the JSON file.

Here is my code:

packages.json

{
  "name": "optinity-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "i18n:report": "vue-cli-service i18n:report --src \"./src/**/*.?(js|vue)\" --locales \"./src/locales/**/*.json\""
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-regular-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/vue-fontawesome": "^3.0.0-4",
    "@kyvg/vue3-notification": "^2.3.1",
    "@microsoft/signalr": "^5.0.6",
    "axios": "^0.21.1",
    "babel-plugin-transform-decorators": "^6.24.1",
    "bulma": "^0.9.2",
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.1.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0",
    "vuex-module-decorators": "^1.0.1"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^2.1.0",
    "@types/jest": "^24.0.19",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-unit-jest": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/test-utils": "^2.0.0-0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5",
    "vue-cli-plugin-i18n": "~2.1.1",
    "vue-jest": "^5.0.0-0"
  }
}

i18n.ts

import { createI18n, LocaleMessages, VueMessageType } from 'vue-i18n'

/**
 * Load locale messages
 * 
 * The loaded `JSON` locale messages is pre-compiled by `@intlify/vue-i18n-loader`, which is integrated into `vue-cli-plugin-i18n`.
 * See: https://github.com/intlify/vue-i18n-loader#rocket-i18n-resource-pre-compilation
 */
function loadLocaleMessages(): LocaleMessages<VueMessageType> {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages: LocaleMessages<VueMessageType> = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default createI18n({
  legacy: false,
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

main.ts

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './i18n'

const app = createApp(App).use(i18n).use(store).use(router)
app.mount('#app');

vue.config.js

module.exports = {
  // ... your other options
  transpileDependencies: [
    'vuex-module-decorators'
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableLegacy: false,
      runtimeOnly: false,
      compositionOnly: false,
      fullInstall: true
    }
  }
}

en.json

{
  "message": "hello i18n !!"
}

and finally

HelloI18n.vue

<template>
  <p>{{ t('message') }}</p>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'HelloI18n',
  setup() {
    const { t } = useI18n({
      inheritLocale: true,
      useScope: 'global'
    })

    // Something todo ..

    return { t }
  }
})
</script>

<i18n>
{
  "en": {
    "hello": "Hello i18n in SFC!"
  }
}
</i18n>

If i switch the scope in my HelloI18n.vue to local i can use the transaltions provided in the <i18n> tag. I already added a console log in my i18n.ts file in order to check if the file is being found, which is the case.

I have no clue why this is not working. Does anyone have any ideas or can point me in the right direction?

Answer 1

The main probles is that the function in i18n.ts doing loadLocalMessages is not getting properly the files from the locales folder.

function loadLocaleMessages (): LocaleMessages<VueMessageType> {
  const locales = require.context(
    './locales',
    true,
    /[A-Za-z0-9-_,\s]+\.json$/i
  )
  const messages: LocaleMessages<VueMessageType> = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  return messages
}

I have added locales(key).default with that you get the values that are getted from the files.