A simple multi-language site with Nuxt.js and nuxt-i18n

In this article, we will see how to create a simple multilanguage website using Nuxt.js and nuxt-i18n module.

Some other stories that might interest you:

👉🏻 How to deploy a Nuxt.js app on Heroku
👉🏻 Became a Web Developer in 2021

👉🏻 Main reference: https://nuxt-community.github.io/nuxt-i18n/

Install nuxt-i18n

First of all install nuxt-i18n

$ npm i nuxt-i18n --save

Once it is installed we can configure it based on our needs.

Configuration options

In our nuxt.config.js let’s add the nuxt-i18n module

modules: [
  ['nuxt-i18n', { ... }]
]

and add some configuration options:

modules: [
  ['nuxt-i18n', {
    locales: [
      {
        name: 'Italiano',
        code: 'it',
        iso: 'it-IT',
        file: 'it-IT.js'
      },
      {
        name: 'English',
        code: 'en',
        iso: 'en-US',
        file: 'en-US.js'
      },
    ],
    langDir: 'lang/',
    defaultLocale: 'it',
  }]
]

In this case, we have created the array locales and set two languages object: Italian and English. For each language, we indicated the name, the code, the iso and the name of the file that contains our translations.

We also indicated the default language throw the parameter defaultLocale and the folder name that contains our translations files (langDir).

Now let’s pass to create these files. In the root create a new folder an name it lang. Inside it create the it-IT.js file and the en-US.js file.

// it-IT.js with Italian translations
export default {
  hello: 'Ciao a tutti',
  pages: {
    home: 'Pagina iniziale',
    contacts: 'Contatti'
  },
}
// en-US.js with English translations
export default {
  hello: 'Hello World',
  pages: {
    home: 'Home',
    contacts: 'Contacts'
  },
}

Now we can use these translations around our Nuxt.js app with this command: $t('key')

Let’s try it and add the Hello world message in our index:

// index.js
<template>
  <h1>{{ $t('hello') }}</h1>
</template>

Well done!

Site navigation

Now that we have defined the languages, create the files with the translations and learn how to add a translation inside our pages and components, let’s add a navigation to our website.

In a simple nuxt.js app we create a navigation link in this way:

// Navigation.vue
<template>
  <div>
    <h1>Site navigation</h1>
    <nuxt-link to="/about">About</nuxt-link>
  </div>
</template>

Using the i18n module is pretty similar. The main difference is that we will use the localePath('page-name') method to retrieve our page.

// Navigation.vue
<template>
  <div>
    <h1>Site navigation</h1>
    <nuxt-link to="localePath('about')">About</nuxt-link>
  </div>
</template>

👉🏻 https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link

Lang navigation & lang switcher

In order to let the user switch language, we can use two methods.

In the first method, we display all the languages available:

// LangNavigation.vue
<template>
  <div>
    <h1>Lang navigation</h1>
      <nuxt-link :to="switchLocalePath('it')">Italian</nuxt-link>
      <nuxt-link :to="switchLocalePath('en')">English</nuxt-link>
  </div>
</template>

In the second one we create a switcher:

// LangSwitcher.vue
<template>
  <nuxt-link
    v-for="locale in $i18n.locales"
    v-if="locale.code !== $i18n.locale"
    :key="locale.code"
    :to="switchLocalePath(locale.code)">{{ locale.name }}</nuxt-link>
</template>

Translate URLs

Until now our sitemap is:

// LangSwitcher.vue
- index.js = [it] mydomain.com - [en] mydomain.com/en/
- about.js = [it] mydomain.com/about - [en] mydomain.com/en/about

In order to translate our URLs, we have to set the page's path.

We can achieve it in two different ways. Setting the parameters inside our configuration options in the nuxt.config.js file or inside each of our pages.

If we choose the first method inside our config file let’s add:

// nuxt.config.js
['nuxt-i18n', {
  parsePages: false,   // Disable acorn parsing
  pages: {
    about: {
      it: '/chi-siamo', // -> mydomain.com/chi-siamo
      en: '/about',     // -> mydomain.com/en/about
    }
  }
}]

Otherwise, in our page component let’s add:

// about.vue
<script>
export default {
  nuxtI18n: {
    paths: {
      it: '/chi-siamo',
      en: '/about'
    }
  },
}
</script>

With the second approach is easier to set a path master for subpages using a parent component.

👉🏻 https://nuxtjs.org/guide/routing#nested-routes

Let’s assume we have this structure:

// website structure
- index.vue
- about/
-- history.vue
-- team.vue

If we add a parent component

// website structure
- index.vue
- about.vue
- about/
-- history.vue
-- team.vue

inside it, we can define the path name and automatically pass it to all the subpages.

// about.vue
<template>
  <nuxt-child />
</template>
<script>
export default {
  nuxtI18n: {
    paths: {
      it: '/chi-siamo',
      en: '/about'
    }
  },
}
</script>

Conclusion

With a few steps, we have built a simple multilanguage website with Nuxt.js and nuxt-i18n.

If you have any question, please leave a comment.

Maybe you are interested also in:

👉🏻 How to deploy a Nuxt.js app on Heroku
👉🏻 Became a Web Developer in 2021