How to build multi-language application with NuxtJS and nuxt-i18n

In this article, I will use Vue-i18n to build multi-language application with NuxtJS

Setting

This article will skip building the application with Nuxt.
Assuming I already have a Nuxt project, the first thing I need to do is install Vue-i18n with npm or yarn.

 npm install Vue-i18n

yarn add Vue-i18n

Integrate i18n into the application

State

Using Vuex to store the language of the user choice In the store directory create an i18n.js file

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

export const mutations = {
  SET_LANG (state, locale) {
    if (state.locales.indexOf (locale)! == -1) {
      state.locale = locale;
    }
  },
};

store/i18n.js

locale in the state stores the current language of the user, locales is a list of all supported languages ​​in the system.

Declare with Vue

To integrate an external package, we define Vue-i18n in the plugins directory
In the plugins directory, create an i18n.js file to declare to Vue that I will use i18n.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use (VueI18n)

export default ({app, store}) => {
  app.i18n = new VueI18n ({
    locale: store.state.locale,
    fallbackLocale: 'vi',
    messages: {
      'en': require ('~ / locales / en.json'),
      'vi': require ('~ / locales / vi.json')
    },
  });
}

plugins/i18n.js

Explain a little bit about the above code. The first is to put i18n in the root directory to be used in the middleware.

Create a Vuei18n object with locale is locale obtained from vuex state, Set the default language when the English translation is not available, it will return to Vietnamese. The language will be taken from two json files en.json and vi.json located in the locales folder under the app folder.

Middleware

Because we need to compile the language before the page is rendered, we need to define a middleware.

In the middleware directory, create an i18n.js file

export default function ({isHMR, app, store, route, params, error, redirect}) {
  const defaultLocale = app.i18n.fallbackLocale
  if (isHMR) return
  const locale = route.query.lang || defaultLocale
  if (store.state.locales.indexOf (locale) === -1) {
    return error ({message: 'This page could not be found.', statusCode: 404})
  }
  store.commit ('SET_LANG', locale)
  app.i18n.locale = store.state.locale
}

middleware/i18n.js

Locale will be taken from query on route (? Lang = {locale}). If the language passed on the route is not in the list of languages supported by the application, it will give an error. Otherwise it will push the language into the state and Vuei18n will compile the display language for the user.

Finally all of our pages use this middleware, so include it in the nuxt config file without having to call back each page.

  plugins: ['plugins / i18n.js'],
  router: {
    middleware: ['i18n']
  },

nuxt.config.js

Vue component

Now I try to do a dropdown to select the language and display content in the language I have chosen

<template>
  <el-dropdown @ command = "changeLang" split-button>
    <span class = "el-dropdown-link">
      {{$ t ('home.lang')}}
    </span>
    <el-dropdown-menu slot = "dropdown">
      <el-dropdown-item command = 'en'> English </el-dropdown-item>
      <el-dropdown-item command = 'vi'> Vietnamese </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</teamplate>

<script>
export default {
  methods: {
    changeLang (lang) {
      this. $ store.commit ('SET_LANG', lang)
      this. $ router.push ({path: `$ {this. $ router.currentRoute.path}? lang = $ {lang}`})
    }
  }
}
</script>

When changing the language by selecting the language in the dropdown, reset the state to the selected language and use the router to push the current page again with the query lang.

locales directory

Finally, create two files en.json and vi.json so that Nuxt has something to compile.

"home": {
  "lang": "Russian"
}

locales/vi.json

"home": {
  "lang": "English"
}

locales/en.json

Then, when the vuecomponent uses the $ t (…) method, it will look up the path and retrieve the corresponding translation.

The above example when calling {{$ t (‘home.lang’)}} and we are selecting the language is Russian, it will display as Russian.

Conclusion

Wishing you success integrating multiple languages into your application

#vuejs #javascript #nuxtjs #vue-js