Christopher KadeImplementing 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:
# Using npm
npm install vue-i18n
# Using yarn
yarn add vue-i18n
Then, define it as a plugin in our configuration file:
// nuxt.config.js
export default {
// ...
plugins: ["~/plugins/i18n.js"],
// ...
};
We now need to create the aforementioned i18n.js file that will configure our plugin:
// plugins/i18n.js
import Vue from "vue";
import VueI18n from "vue-i18n";
// Tell Vue to use our plugin
Vue.use(VueI18n);
export default ({ app }) => {
// Set the i18n instance on app
// This way we can use it globally in our components through this.$i18n
app.i18n = new VueI18n({
// Set the initial locale
locale: "en",
// Set the fallback locale in case the current locale can't be found
fallbackLocale: "en",
// Associate each locale to a content file
messages: {
en: require("~/static/content-en.json"),
fr: require("~/static/content-fr.json")
}
});
};
Don't forget to create your json files that will contain your textual values for each language. In our case, we could have:
// static/content-en.json
{
"title": "Hello, how are you?"
}
and
// static/content-fr.json
{
"title": "Bonjour, comment allez-vous?"
}
We'll be able to access each one of these values in our components like so:
// Will return the correct string based on the current locale
this.$t("title")
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:
changeLanguage(lang) {
// Change the i18n context object's locale
// This makes it so the correct locale file is used
this.$i18n.locale = lang;
}
And here's this method used in the context of a component:
<template>
<section>
<h1>{{ title }}</h1>
<div>
<button @click="changeLanguage('en')">EN</button>
<button @click="changeLanguage('fr')">FR</button>
</div>
</section>
</template>
<script>
export default {
computed: {
title() {
// this.$t("title") returns the value of our title attribute in our JSON file
// The correct file is selected based on the locale value
// If it was an object, we could access its attributes like so: this.$t("myObject").myAttribute
return this.$t("title");
}
},
methods: {
/**
* Called when a language button is clicked
* Changes the i18n context variable's locale to the one selected
*/
changeLanguage(lang) {
this.$i18n.locale = lang;
}
}
};
</script>
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.
