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.
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.
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
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
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
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
as defined in the
Let’s have a look at the default-language file
As you can see, the script extracts the correct default message and keeps line-breaks
"/' and replaces the square brackets with angle brackets.
Now I’ll add the German (
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
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
don’t want to use the Vue-Starter? Use an NPM task instead!
This will work with all kinds of projects that use vue-i18n.