DEV Community

Cover image for Adding internationalization to your Nuxt.js applications in a few minutes
Christopher Kade
Christopher Kade

Posted on • Updated on • Originally published at christopherkade.com

Adding internationalization to your Nuxt.js applications in a few minutes

#webdev #vue #tutorial #javascript

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:

# Using npm
npm install vue-i18n

# Using yarn
yarn add vue-i18n
Enter fullscreen mode Exit fullscreen mode

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

// nuxt.config.js

export default {
  // ...

  plugins: ["~/plugins/i18n.js"],

  // ...
};
Enter fullscreen mode Exit fullscreen mode

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")
    }
  });
};
Enter fullscreen mode Exit fullscreen mode

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?"
}
Enter fullscreen mode Exit fullscreen mode

and

// static/content-fr.json
{
  "title": "Bonjour, comment allez-vous?"
}
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (5)

Collapse
 
mannil profile image
Alexander Lichter •

Happy to hear that you had such a positive experience!
Have you tried github.com/nuxt-community/nuxt-i18n/ by any chance?

Collapse
 
christopherkade profile image
Christopher Kade •

I've never had the opportunity to use it, I'll be sure to check it out, thanks for sharing !

Collapse
 
aturingmachine profile image
Vince •

If you are using i18n I would suggest disabling the auto translate feature from browsers. I use i18n, in Angular, at work and we have had people get upset about bad translations that after some digging came from google translate and not our translations.

Collapse
 
haruanm profile image
Haruan Justino •

Hi there, we started to used vue-i18n in production here some months ago, it worked pretty good, we just had 2 issues to deal with:

1 - If you use the directive (v-t) translation (still for the front), there is some config to keep the text appearing when using animations.

2 - We had problems with processing the translations in the front after having many lines in each language file, we fixed it bu putting the translation tag on each component and working with it like css and js.

Collapse
 
jespinosaonline profile image
Jonathan Espinosa •

Hi, I have problems to know how to maintan the locale changing routes.

Read next

robole profile image

How to create a slick CSS animation from Jackie Brown

Rob OLeary -

facubotta profile image

Meta Data in React

Facundo Botta -

ajinm profile image

Unlocking Cloudflare's Threat Score: Enhance Your Security Without Upgrading Your Plan

ajinm98 -

snyk_sec profile image

Building an npm package compatible with ESM and CJS in 2024

SnykSec -