vue-i18n Cannot translate the value of keypath

Question

I have looked through the other similar questions but none of them seem to apply to my case. I cannot get the translations to work every single one get the Cannot translate the value of keypath

the config looks like this

 export default function (app) {
  return {
    locales: [
      {
        code: 'sv',
        iso: 'sv-SE',
        file: 'sv-SE.js'
      },
      {
        code: 'en', // Make sure default is last in array
        iso: 'en-US',
        file: 'en-US.js'
      }
    ],
    strategy: 'no_prefix',
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: {
        default: ['en']
      }
    }
  }
}

and then in lang/en-US.js it looks like this

export default {
  Welcome: 'Welcome',
  Logout: 'Logout',
  Login: 'Login',
  Emailaddress: 'Email',
  Password: 'Password',
  Register: 'Register',
}

In nuxt.config.json

  modules: [
    // https://go.nuxtjs.dev/pwa
    '@nuxtjs/pwa',
    '@nuxtjs/apollo',
    '@nuxtjs/i18n'
  ],

  i18n: '~/configs/i18n.config.js',

configs/i18n.config.js

export default function (app) {
      return {
        locales: [
          {
            code: 'sv',
            iso: 'sv-SE',
            file: 'sv-SE.js'
          },
          {
            code: 'en', // Make sure default is last in array
            iso: 'en-US',
            file: 'en-US.js'
          }
        ],
        strategy: 'no_prefix',
        lazy: true,
        langDir: '~lang/',
        defaultLocale: 'en',
        vueI18n: {
          fallbackLocale: {
            default: ['en']
          }
        }
      }
    }

One of the use cases

<label for="login-email" class="form-label text-muted fw-bold mb-1">{{
    $t("Emailaddress")
  }}</label>

But when I try to use any of these translations I get the warning that it cannot translate it and it uses no translation.

what am I missing here?

Answer 1

i18n.js:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  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 new VueI18n({
  locale: 'fi',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'fi',
  messages: loadLocaleMessages()
})

Make locales directory and create a Json file for each language like this:

   {
      "Welcome": 'Welcome',
      "Logout": 'Logout',
      "Login": 'Login',
      "Emailaddress": 'Email',
      "Password": 'Password',
      "Register": 'Register',
    }