Add Internationalization to a Nuxt.js App

Sometimes we build apps and think only about the English speaking users. But there are different language speaking users who might want to use your app because it’s really good, but the language becomes a barrier.

Today let’s explore the option of adding different languages to your Nuxt.js app.

The Basics:

Install vue-i8n with the following command

npm install vue-i8n
// or
yarn add vue-i8n

Create a file under plugins/i8n.js and add the following initial setup for i8n.

import Vue from 'vue';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      en: require('~/locales/en.json'),

      // ---- Your other languages ----
      // 'hi': require('~/locales/hindi.json'),
      // 'mal': require('~/locales/malayalam.json'),
      // 'tam': require('~/locales/tamil.json')
    },
  });
  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`;
    }
    return `/${app.i18n.locale}/${link}`;
  };
};

Add the Plugin file path in nuxt.config.json file:

module.exports = {
  plugins: ['~/plugins/i18n.js'],
  // ... your other configurations
};

Under locales/en.json add your translations for the English language:

{
  "hello": "Hello"
}

For another language ex: Hindi you could create one more file locales/hi.json with the same JSON key as in English and the translated value.

Ex for Hindi:

{
  "hello": "नमस्ते"
}

Now in your component or pages file, you can directly call

<p>
  {{ $t('hello') }}
</p>

Extra:

There are various ways you can set the language chosen by the user. The example that I tried out was using cookies for example. You could replace it with your custom profile API or saving it in local/session storage, etc, or using a route based locale selection.

Create a file middleware/i8n.js with:

export default async function({ app, store }) {
  // Set Language
  const locale = app.$cookies.get('app-lang');
  app.i18n.locale = locale;
  store.commit('SET_LANG', locale);
}

and add it in nuxt.config.json

module.exports = {
  router: {
    middleware: ['i18n', 'autoLogin'],
  },

  // ... other configs
};

I have used Cookie-Universal-Nuxt for this example. If you want to use the same, follow the instructions in the link provided. (Pretty simple, just install and add it in nuxt.config.js — module section)

Then in the store, I have set up different ‘locales’ available and the current ‘locale’

export const state = () => ({
  locale: 'en',
  locales: ['en', 'hi']
});

// ...
export const mutations = {
  SET_LANG(state, locale) {
    if (state.locales.includes(locale)) {
      state.locale = locale;
    }
  }
});

// ... Incase you need to call the action
export const actions = {
  setLocale(context, value) {
    context.commit('SET_LANG', value);
  },
});

ProTip

In the locales/en.json file instead of directly putting key-value pairs, you could organize it based on the section of your page.

Ex:

{
  "menu": {
    "home": "Home",
    "feedback": "Feedback",
    "profile": "Profile"
  }
}

That’s it! If you have followed all the steps along, you have successfully setup i8n for your Nuxt.js project and increase the number of people who use your website.