Back button to all articlesAll articles

Adding internationalization to your Nuxt.js applications

Implementing internationalization (commonly known as i18n) is often feared by a lot of Front-End developers. Setting it up, adding new languages on the fly & UX are often main concerns when it comes to it.

Thankfully, Nuxt.js makes the whole process extremely easy. In this short post, I'll cover how to set up i18n for a Nuxt application, step by step.

The finished product can be found on Codesandbox here.

Step 1: Installing vue-i18n and setting it up

We'll use the well known vue-i18n package to handle internationalization.

Start by installing it:

1# Using npm 2npm install vue-i18n 3 4# Using yarn 5yarn add vue-i18n 6

Then, define it as a plugin in our configuration file:

1// nuxt.config.js 2 3export default { 4 // ... 5 6 plugins: ["~/plugins/i18n.js"], 7 8 // ... 9}; 10

We now need to create the aforementioned i18n.js file that will configure our plugin:

1// plugins/i18n.js 2 3import Vue from "vue"; 4import VueI18n from "vue-i18n"; 5 6// Tell Vue to use our plugin 7Vue.use(VueI18n); 8 9export default ({ app }) => { 10 // Set the i18n instance on app 11 // This way we can use it globally in our components through this.$i18n 12 app.i18n = new VueI18n({ 13 // Set the initial locale 14 locale: "en", 15 16 // Set the fallback locale in case the current locale can't be found 17 fallbackLocale: "en", 18 19 // Associate each locale to a content file 20 messages: { 21 en: require("~/static/content-en.json"), 22 fr: require("~/static/content-fr.json"), 23 }, 24 }); 25}; 26

Don't forget to create your json files that will contain your textual values for each language. In our case, we could have:

1// static/content-en.json 2{ 3 "title": "Hello, how are you?" 4} 5


1// static/content-fr.json 2{ 3 "title": "Bonjour, comment allez-vous?" 4} 5

We'll be able to access each one of these values in our components like so:

1// Will return the correct string based on the current locale 2this.$t("title"); 3

Step 2: Changing our locale on the fly

All we have to do is update the i18n context object's locale attribute when we need to change the language.

Here's a method that takes care of it:

1changeLanguage(lang) { 2 // Change the i18n context object's locale 3 // This makes it so the correct locale file is used 4 this.$i18n.locale = lang; 5} 6

And here's this method used in the context of a component:

1<template> 2 <section> 3 <h1>{{ title }}</h1> 4 5 <div> 6 <button @click="changeLanguage('en')">EN</button> 7 <button @click="changeLanguage('fr')">FR</button> 8 </div> 9 </section> 10</template> 11 12<script> 13 export default { 14 computed: { 15 title() { 16 // this.$t("title") returns the value of our title attribute in our JSON file 17 // The correct file is selected based on the locale value 18 // If it was an object, we could access its attributes like so: this.$t("myObject").myAttribute 19 return this.$t("title"); 20 }, 21 }, 22 methods: { 23 /** 24 * Called when a language button is clicked 25 * Changes the i18n context variable's locale to the one selected 26 */ 27 changeLanguage(lang) { 28 this.$i18n.locale = lang; 29 }, 30 }, 31 }; 32</script> 33

Step 3: Wait, there's no step 3?

Yeah, that's pretty much all you need to know to handle i18n in a Nuxt application.
Of course, there are many ways of customizing your user experience as can be seen in the official documentation.

I hope this has helped some of you figure our i18n in the context of your Nuxt projects.
Feel free to follow me to get a heads up on any future articles I'll write about Javascript, React, Vue & CSS.

Twitter is definitely the best place to see what I have to share on a daily basis, so feel free to 👋 at me there.