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

and

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.