Adding full i18n to Quasar

Reusable code for any platform!

UPDATE 6th of June 2019: This article has been updated to fit v1.0 of Quasar.

If you are wanting to translate your own phrases and terms for your components and / or you are wondering why Quasar’s own $q.lang (formerly $q.i18n)isn’t getting you to where you want to go, that’s because Quasar’s internal translation system is built only for Quasar’s internal components. Once you start building out your own components, Quasar’s i18n system won’t extend to help you.

No biggie! This tutorial should get you to your own translation system.

IMPORTANT NOTE: If you had selected i18n during the initialization of your project with Quasar’s CLI, you can skip to step 5 below. You are basically already set up to do translations. 😄

Steps to follow.

1. First, you need to install vue-i18n into your project. Note, we always recommend using Yarn for project dependency management.

$ yarn add vue-i18n
or 
$ npm install vue-i18n --save

If all went well, you should see something like this:

A successful install of vue-i18n

2. Next, you need to create the boot file for Quasar. For this, we can use Quasar’s CLI new command. Enter this into your console:

$ quasar new boot i18n

3. Now go into the /boot directory and open up the newly created i18n.js file. Delete the contents and replace them with the following code:

import VueI18n from 'vue-i18n'

import messages from 'src/i18n'

export default ({ app, Vue }) => {
  Vue.use(VueI18n)

  app.i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages
  })
}

4. Now we need to tell Quasar the boot file is available. Go to the quasar.conf.js file and open it. Add 'i18n' as an array item to the boot array. Something like this:

5. You can put your English phrases into the en-us/index.js file in the directory called i18n directly under /src in your project.

The location for your translations

6. If you’d like to make separate language translations of your own phrases, create a second directory under /i18n in the same format as en-us directory. Below is an example for German translations (de).

A translation file added for German.

7. Add your translations as needed to your new file.

export default {
  failed: 'Aktion fehlgeschlagen',
  success: 'Aktion erfolgreich',
}

8. Make sure to add the new file to the imports and exports of /i18n/index.js.

The German language added to the index.js file.

That’s it! You can now access your translation phrases in your components with:

{{ $t('translation.path') }} // in your template code
or 
this.$t('translation.path') // in your script code

Example Code

Visit this Codesandbox to see it all working (including the first Pro Tip below, along with a phrase added to the menu “Essential Links”) !!

Pro Tip! — Change the app language dynamically!

If you want to change the language dynamically, first create a select component for the language selection.

<q-select 
  label="Select Language"
  v-model="lang" 
  map-options
  :options="langs"
/>

Then create the options array for the select component in the data function. The example below adds German. Also set the initial value of lang for the v-model of the select, so we can get the binding going.

return {
  langs: [
    {
      label: 'German',
      value: 'de'
    },
    {
      label: 'US English',
      value: 'en-us'
    }
  ],
  lang: this.$i18n.locale

Then create a watcher for the lang data property. Here you’ll want to set both the $q.lang (Quasar’s translations) and the $i18n (your app’s translations) objects for the newly selected language.

watch: {
  lang(lang) {
    this.$i18n.locale = lang.value
    // set quasar's language too!!
    import(`quasar/lang/${lang.value}`).then(language =>     
    {this.$q.lang.set(language.default)
    })
  }
}

You can reference the /i18n folder in Quasar to see full list of the available languages.

IMPORTANT NOTE: You must follow the language file names as the option values in your language selection. You’ll also probably want to make this “language selector” it’s own component, so you can insert it anywhere you’d like in your application.

If you’d like another language added, please make a PR to the Quasar repository.

Pro Tip #2! — Translations outside of components

If you need access to your app’s translations outside of your components, you can also use this code for the boot file:

import VueI18n from 'vue-i18n'
import { messages } from 'src/i18n'
let i18n
export default ({ app, Vue }) => {
  Vue.use(VueI18n)
  app.i18n = new VueI18n({
    locale: 'en-us',
    fallbackLocale: 'en-us',
    messages
  })
  i18n = app.i18n
}
export { i18n }

You should be able to access the translations in non-component files with:

import { i18n } from 'boot/i18n.js'
i18n.t('translation.path')

For further information on how to work with vue-i18n, please refer to the vue-i18n documentation.

And have fun with Quasar! 😃

If you need more information about Quasar itself, here are a few links for your consideration:

COMPONENTS: https://github.com/quasarframework/quasar
CLI: https://github.com/quasarframework/quasar-cli
THE DOCS: https://quasar-framework.org/
DISCORD: http://chat.quasar-framework.org/
FORUM: https://forum.quasar-framework.org/
TWITTER: https://twitter.com/quasarframework
STEEM: http://steemit.com/@quasarframework