can't get vue-i18n initialised properly

[Martin]

This should be pretty straight forward so I wonder what I’m missing here.
I’ve set up vue-i18n in main.js like this:

const messages = {
  en : {
    message : {
      hello : 'hello world'
    }
  },
  ja : {
    message : {
      hello : 'こんにちは、世界'
    }
  }
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n     = new VueI18n(
  {
    locale : 'ja', // set locale
    messages // set locale messages
  })
Vue.use(Quasar) // Install Quasar Framework
Quasar.start(
  () => {
    /* eslint-disable no-new */
    new Vue(
      {
        el     : '#q-app',
        i18n,
        router,
        render : h => h(require('./App'))
      }
    )
  }
)

component

<template>
...
 <div>{{ $t('message.hello') }}</div>
...

output

The package seems to work but it’s giving warnings that it can’t find the translations.

vue-i18n] Cannot translate the value of keypath "message.hello". Use the value of keypath as default

[Martin]

Never mind. I’ve built my own i18n.

[icfr]

did you have set lang ?

// set lang

Vue.config.lang = 'ja'

[rstoenescu]

I think you’re on a wrong path with how you use vue-i18n. It should be like this:

//main.js
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
Vue.config.lang = 'en' // or whatever language

Then in each component that needs i18n:

// import locales for this component (locales exclusively for this component)
import locales from '.../some/file/with/locales/definitions...'

export default {
  locales,
  ...
}

Where the locales file can be:

{
  en : {
    message : {
      hello : 'hello world'
    }
  },
  ja : {
    message : {
      hello : 'こんにちは、世界'
    }
  }
}

[LaurentPayot]

Interesting, I never thought of per-component locales. The drawback is that translations are scattered over as many files as components…

[s.molinari]

Hmm…this is an interesting challenge.

Scott

[rstoenescu]

@LaurentPayot you can also have a “global” locale file along per file. Per file is better as you load only what you need, vue-i18n code runs faster and you get modularized locale files rather one big file (changes to it are easier to make and won’t have possible side-effects in other components).

[s.molinari]

I’m thinking, in a much more sophisticated system, such locale files could be automatically created out of data stored in a database or, maybe even sent to the client directly as data?

Scott

[rstoenescu]

@s-molinari Seems like a good question for vue-18n owners

[LaurentPayot]

@s.molinari I’m using vue-i18n and at startup or language change I’m downloading (xhr) a single-language global json file. It’s working fine.

[s.molinari]

That is fine for the delivery. I’m thinking also about the creation/ maintenance too.

Scott