can't get vue-i18n initialised properly



  • 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?



  • Yes. Thanks for pointing that out. I’ve updated the article.

    As for the solution to separate the files, I’ve not looked into it, so can’t help much there. Sorry.

    Scott


Log in to reply