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



  • I know this is quite old now, and perhaps things have changed, but I can’t get i18n working (outside of quasar’s built in translations which ARE working). Here is what I am doing:

    1. Using example here (https://quasar.dev/options/quasar-language-packs#Dynamically-Picking-Default-Language) I can successfully set language for quasar
    2. Using example above as locales, and the same formatting I am successfully importing locales file with strings for my component
    3. I am then attempting to use one of these with {{ $t('langChoose') }} in my template, but it only outputs “langChoose”, not the locale string from my file for that variable.

    Can anyone tell me what I am doing wrong? In step two above I am running into an odd issue where I don’t get errors if I format like this:

    export default {
      es: {
        instructions: 'Elija sus preferencias de aplicación abajo',
        langChoose: 'Eliga idioma'
      },
      en: {
        instructions: 'Please choose app prefs below',
        langChoose: 'Choose your language'
      }
    }
    

    But removing the export default results in a babel loader syntax error for some reason.



  • I have also tried to setup SFC translation blocks as detailed here: https://quasar.dev/options/app-internationalization#Setting-up-Translation-Blocks-in-your-SFCs and here: https://kazupon.github.io/vue-i18n/guide/sfc.html#single-file-components

    Sadly, these do not work either. I have a test on one page where I am embedding a quasar language variable {{$q.lang.label.close}} and my own {{ $t('langChoose') }} side by side with a language switcher. The Quasar variable changes when I change the language, the i18n one does not, it only displays ‘langChoose’

    Does anyone have a working example of using this in one’s own component in a quasar project? I am sure I am not the first one to attempt this.



  • This is what the build section of my quasar.conf.js file looks like, do I need to add anything else?

    build: {
          scopeHoisting: true,
          // vueRouterMode: 'history',
          // vueCompiler: true,
          // gzip: true,
          // analyze: true,
          // extractCSS: false,
          extendWebpack (cfg) {
            cfg.resolve.alias['vue'] = 'vue/dist/vue.common'
            cfg.module.rules.push({
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/
            }),
            cfg.module.rules.push({
              resourceQuery: /blockType=i18n/,
              use: [
                {loader: '@kazupon/vue-i18n-loader'}
              ]
            })
          }
        }
    


  • I am starting to think this must be a bug in Quasar, as I have followed all available instructions and still can’t get my strings to show up. If no one has any better suggestions, I guess I will report it as an issue over at github



  • @ssuess - Did you start your project with i18n selected during the creation process?

    Did you see and follow this article? https://medium.com/quasar-framework/adding-full-i18n-to-quasar-150da2d5bba4

    Scott



  • At a quick glance, my setup is almost identical to what you outline in the article except that I am trying to use language files per component (and import them there) instead of using a global one. And I think it is clear that the boot item etc is installed properly or quasar’s own i18n strings would not work either (or are you saying quasar’s locale string switching doesn’t rely on vue-i18n?). I will take a longer look at the article in few hours, perhaps there is something else that I am missing. Thank you very much for your reply and the link, I appreciate it.



  • or are you saying quasar’s locale string switching doesn’t rely on vue-i18n

    No. It doesn’t. It’s two separate systems. 🙂

    Scott



  • @s-molinari Ok, so (finally) got a chance to look at your article, it seems that I have always had i18n setup correctly in my project. And when I added strings to src/i18n/en-us/index.js, they DO correctly show up. But that would mean that ALL of the components in my app must share this same language file, which I do not want to do. I want each component to have its own. Where these language files live is less important to me than that they are separate, but ideally they would live in something like src/i18n/ComponentName/en-us.js (es.js, de.js, etc) or src/i18n/en-us/ComponentName.js (etc). Any idea how to make this work? Thanks again for your help!



  • also your switching example says to set this.$q.i18n.set(lang.default) but the quasar docs (from here: https://quasar.dev/options/quasar-language-packs) use this: this.$q.lang.set(lang.default)…I assume the quasar docs are the most up to date?


Log in to reply