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

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

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:

Using example here (https://quasar.dev/options/quasar-language-packs#Dynamically-Picking-Default-Language) I can successfully set language for quasar
Using example above as locales, and the same formatting I am successfully importing locales file with strings for my component
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.

ssuess

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.

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'}
          ]
        })
      }
    }

ssuess

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

s.molinari

@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

ssuess

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.

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

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!

ssuess

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?