can't get vue-i18n initialised properly



  • 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
    0_1491247281917_upload-f4248e58-1b62-4635-967b-e091f6b9e422
    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
    


  • Never mind. I’ve built my own i18n.



  • did you have set lang ?

    // set lang
    
    Vue.config.lang = 'ja'
    

  • Admin

    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 : 'こんにちは、世界'
        }
      }
    }
    


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



  • Hmm…this is an interesting challenge.

    Scott


  • Admin

    @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).



  • 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


  • Admin

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



  • @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.



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

    Scott


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.