vue-i18n-vue-starter

Effectively work with i18n in Vue.JS (productivity tip)

If you need to support multiple languages in your Vue project, you will come across some important concerns.

One issue that I always have is having to maintain a library of translation keys.

It’s definitely not easy to keep track of which keys are already in your translation files and which ones aren’t.

IN THIS POST, I’D LIKE TO SHOW YOU HOW I KEEP TRACK OF ALL MY TRANSLATION KEYS IN VUE-STARTER.

Use Case

I need to support multiple languages on my site (EN/DE/etc.) and want to be able to quickly define default messages for my default language. I also want to have a good looking code base without being distracted by long default messages. It should also be possible to easily add line-breaks and HTML tags.

Prerequisites

First of all, we’ll need a copy of the latest vue-starter. Unzip the file, cd to the vue-starter folder and install the dependencies by running npm install.

DEFINING OUR DEFAULT LANGUAGE AND ALL SUPPORTED LANGUAGES

I usually work in international teams where we use English as our default and development languages. The vue-starter is built on top of vue-i18n and reads the accept-language header of your browser to set the default language of your application. However, you can also specify a default ‘fallback’ language that is also used by the tooling provided by the vue-starter.

To see the default language and define which languages the application should support, open the ./package.json file and scroll to the config section, it should look like this:

 

For this post, we’ll be using en-EN as our default language, with additional support for de-DE.

Now the changes have been made, we’ll want to reset the ./i18n folder with rm -rf i18n/*

translate with default messages

Let’s create some translations for the ./src/app/home/Stage.vue component. The component looks like this:

 

Let’s change the template to this:

 

As you can see from lines 10-15 you can define a default message for a translation key right in your code with a “magic comment” (I got that term from webpack).

All that needs to be done is to put the comment in the brackets of the $t function. You can call the $t function as a binding, as a template variable, or in your Vue component with this.$t.

If you want to use HTML tags in your default message within your template, replace the angle brackets <> with square brackets []. This is not necessary if you use the translation function from inside a component.

Extract the messages!

To automatically create your language files and to associate your default messages with your translation keys run the following command: npm run extract-i18n-messages.

As a result, this will generate two files

  • ./i18n/en-EN.json and
  • ./i18n/de-DE.json

as defined in the ./package.json.

Let’s have a look at the default-language file ./i18n/en-EN.json:

 

As you can see, the script extracts the correct default message and keeps line-breaks \n, quotes "/' and replaces the square brackets with angle brackets.

Now I’ll add the German (de-DE) translation:

 

If you change your message in the code and re-run the script, it will overwrite the default messages in ./i18n/en-EN.json but not in ./i18n/de-DE.json.

This is very helpful to keep your master translation file up to date and it plays really well together with services like webtranslateit.

Here is the beautiful result

vue i18n

 

don’t want to use the Vue-Starter? Use an NPM task instead!

Finally, if you have your own setup for example with the vue-cli, you just have to copy this script into your project and create an npm task for it – done!

This will work with all kinds of projects that use vue-i18n.

0 comments on “Effectively work with i18n in Vue.JS (productivity tip)Add yours →

Leave a Reply

Your email address will not be published. Required fields are marked *