Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    can't get vue-i18n initialised properly

    Help
    7
    25
    5466
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Martin
      Martin last edited by

      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
      
      1 Reply Last reply Reply Quote 0
      • Martin
        Martin last edited by

        Never mind. I’ve built my own i18n.

        1 Reply Last reply Reply Quote 0
        • I
          icfr last edited by

          did you have set lang ?

          // set lang
          
          Vue.config.lang = 'ja'
          
          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by 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 1 Reply Last reply Reply Quote 1
            • LaurentPayot
              LaurentPayot @rstoenescu last edited by

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

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                Hmm…this is an interesting challenge.

                Scott

                1 Reply Last reply Reply Quote 0
                • rstoenescu
                  rstoenescu Admin last edited by 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).

                  1 Reply Last reply Reply Quote 1
                  • s.molinari
                    s.molinari last edited by

                    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

                    LaurentPayot 1 Reply Last reply Reply Quote 0
                    • rstoenescu
                      rstoenescu Admin last edited by

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

                      1 Reply Last reply Reply Quote 0
                      • LaurentPayot
                        LaurentPayot @s.molinari last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • s.molinari
                          s.molinari last edited by

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

                          Scott

                          1 Reply Last reply Reply Quote 0
                          • ssuess
                            ssuess last edited by ssuess

                            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.

                            1 Reply Last reply Reply Quote 0
                            • ssuess
                              ssuess last edited by

                              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.

                              1 Reply Last reply Reply Quote 0
                              • ssuess
                                ssuess last edited by ssuess

                                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'}
                                          ]
                                        })
                                      }
                                    }
                                
                                1 Reply Last reply Reply Quote 0
                                • ssuess
                                  ssuess last edited by

                                  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

                                  1 Reply Last reply Reply Quote 0
                                  • s.molinari
                                    s.molinari last edited by

                                    @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

                                    stukki 1 Reply Last reply Reply Quote 0
                                    • ssuess
                                      ssuess last edited by

                                      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.

                                      1 Reply Last reply Reply Quote 0
                                      • s.molinari
                                        s.molinari last edited by s.molinari

                                        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

                                        1 Reply Last reply Reply Quote 0
                                        • ssuess
                                          ssuess last edited by ssuess

                                          @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!

                                          1 Reply Last reply Reply Quote 0
                                          • ssuess
                                            ssuess last edited by

                                            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?

                                            1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post