Give vue-i18n more superpowers❕

It’s joyful to work with Vue.js. The design is elegant and the robust first-party additions which can be coupled with, make building browser apps a pleasure.

The most famous i18n plugin for the progressive JavaScript framework Vue.js is probably Vue I18n.

Kazuya, thank you for this great i18n plugin!

ew versions

Beside templates, directives, data binding, event handling, etc… with v3 Vue.js is now introducing also Composition API, Teleport, Fragments… and Suspense.
The appropriate version to Vue.js v3 for Vue I18n is v9.

So how does a basic vue-i18n setup look like?

Let’s get into it…

Prerequisites

Make sure you have Node.js and npm installed. It’s best, if you have some experience with simple HTML, JavaScript and basic Vue.js, before jumping to vue-i18n.

Getting started

Take your own Vue.js project or create a new one, i.e. with the vue create cli command.

Let’s install the vue-i18n dependency:

npm install vue-i18n@9

Let’s prepare the main.js file:

Now let’s create a first component TranslationShowCase.vue:

…and use that component in App.vue:

You should now see something like this:

Language Switcher

Now we will create a language switcher to make the content change between different languages.

🥳 Awesome, you’ve just created your first language switcher!

Component interpolation and directive

Now let’s try component interpolation and the translation directive:

…and add the new keys to your translations:

This should be the result:

Where are the additional superpowers?

Let’s meet locizer

locizer is a lightweight module to access data from your locize project and use that inside your application.

What is locize?

How does this look like?

First you need to signup at locize and login.
Then create a new project in locize and add your translations. You can add your translations either by importing the individual json files or via API or by using the CLI.

Having the translations in your code file works, but is not that suitable to work with, for translators.
Using locize separates the translations from the code.

Having imported all translations should look like this:

Done so, we’re going to install locizer.

npm install locizer

Let’s create a dedicated i18n.js file:

The translations are now loaded asynchronously, that’s why we export the loadMessagesPromise and use it in your App.vue:

Additionally, we make use of the new Suspense functionality of Vue.js.
Let’s create a new file: i.e. Suspenser.vue:

And use that in your main.js file:

Now, as long your translations gets loaded you’ll see the fallback template:

If your browser is configured with german language, you may now have seen the language automatically was set to german by default. This is because of the language detection feature of locizer. You can configure the language detection with other options
By default the language detection also is looking for the query parameter lng, so you can also type this url to test this: http://localhost:8080/?lng=de

save missing translations

I wish newly added keys in the code, would automatically be saved to locize.

Your wish is my command!

Extend the i18n.js file with the locize api-key and the handleMissing function:

And use it in the component:

Now, if you add a new key in your templates, <h2>{{ $t("How are you?") }}</h2>:

It gets automatically saved to locize:

Lastly, with the help of the auto-machinetranslation workflow, new keys not only gets added to locize automatically, while developing the app, but are also automatically translated into the target languages using machine translation:

👀 but there’s more…

Caching:

Merging versions:

🧑‍💻 The code can be found here.

🎉🥳 Congratulations 🎊🎁

I hope you’ve learned a few new things about Vue.js localization and modern localization workflows.

So if you want to take your i18n topic to the next level, it’s worth to try locize.

👍

founder of locize.com; Software Architect, Bachelor in Computer Science #serverless #nodejs #cqrs #ddd always in search for #innovative and #disruptive stuff