Handling internationalisation (I18N) in Vue

I always struggled with implementing support for internationalisation in my Vue and Nuxt apps. The problem is that in order to do it correctly, you have to take care about several different aspects like language, currency, optionally timezone, and probably some more.

I was so happy to figure out that both Vue and Nuxt frameworks have great support for I18N in a form of a plugin / module created by Kazupon (make sure to follow him and send him some well deserved kudos)

Building application with support for I18N in these frameworks is so easy with the usage of these modules/plugins.

In this article, I will introduce you to the topic of I18N and show you how you can achieve that in both Vue and Nuxt frameworks.

Enjoy!

🤔 What is I18N?

In programming, internationalization and localization, often abbreviated i18n and l10n respectively, are means of adapting computer software to different languages, regional peculiarities and technical requirements of a target locale.

Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes. Localization is the process of adapting internationalized software for a specific region or language by translating text and adding locale-specific components.

Now, that we know what I18N and L10N is, let's see how we can implement them both in Vue and Nuxt.

🟢 Handling I18N in Vue

The basic usage of this plugin is really straightforward. If you would like to see more, checkout official documentation https://vue-i18n.intlify.dev/.

First we need to install it using our favourite package manager (in my case it is yarn):

yarn add vue-i18n@9

Next, we need to create I18N plugin and configure our Vue app to use it like following:

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // options
})

const app = createApp({
  // options
})

app.use(i18n)
app.mount('#app')

This would register the I18N plugin but in order to actually make it work the way we want, we need to pass some configuration options:

const i18n = VueI18n.createI18n({
  locale: 'pl',
  fallbackLocale: 'en',
  messages: {
   en: {
    message: {
      hello: 'Hello'
    }
   },
   pl: {
    message: {
      hello: 'Cześć'
    }
   }
  }
})

And then, when we use following code in our template we should see translated text:

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

>>>

<div id="app">
  <p>Cześć</p>
</div>

And that's it for the basic usage. For more advanced concepts check out https://vue-i18n.intlify.dev/guide/essentials/syntax.html

🟢 Handling I18N in Nuxt

The usage for Nuxt is very similar, first we need to install the module:

yarn add -D @nuxtjs/i18n

Next, add it to the modules array in nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n']
})

And provide all required configuration:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
   legacy: false,
   locale: 'en',
   messages: {
     en: {
       welcome: 'Welcome'
     },
     fr: {
       welcome: 'Bienvenue'
     }
   }
  }
})

And we can use it in the application like following:

<script setup>
const { locale, setLocale } = useI18n()
</script>

<template>
  <div>
    <div>
      <button @click="setLocale('en')">en</button>
      <button @click="setLocale('fr')">fr</button>
      <p>{{ $t('welcome') }}</p>
    </div>
  </div>
</template>

For more, check out https://i18n.nuxtjs.org/

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to utilize internationalization (I18N) in Vue applications.

Take care and see you next time!

And happy coding as always 🖥️