Implementing Internationalization (i18n) in Vue.js Projects

Check this post in my web notes!

Why is Internationalization important? The reasons are manifold: it expands the reach of your application to a global audience, attracts more clients, and enhances the overall user experience. Fortunately, there's a fantastic library called "i18n" that simplifies the process of internationalizing our Vue.js applications. In today's article, we'll delve into how to integrate this library into our app and harness its power. Join us in this hands-on exploration.

For this article, we'll leverage the 'Simple CRM' project from our previous list of projects. We'll integrate and utilize the i18n library to internationalize our application.

Typically, articles are divided into several sections, but in our scenario, we're focusing on one library and one cohesive topic. Therefore, let's proceed step-by-step without segmenting the content.

Okay, we need to install i18n for the Vue library into our project, for that - open the existing one or create a new one. Then, in the console use the command: "npm i vue-i18n@9".

We will use i18n globally so let's modify our main.js file. Import the createI18n function from 'vue-i18n', Use the createI18n function to implement the library, pass the object as a parameter into the function, and configure locale and messages keys like in the example.

const i18n = createI18n({
  locale: 'en',
  messages: {
    en,
    ua
  }
})
export { i18n };

Locale in this case is our default language, and messages contain files with translations. Last line we exported our module so that we could update the locale dynamically.

Next step, we will create "en.js" and "ua.js" files and add translations into them.

export default {
    welcome: 'Welcome! The application is under construction.',
    dashboard: 'Dashboard',
    stores: 'Markets',
    products: 'Products',
    users: 'Users',
}

Also, do not forget to import those files into our main.js file. And what's next? Yes sure, we want to use this translation in our Vue js app. For that purpose open any Vue js component and replace text with "t" function "$t(key)".

<div class="dashboard">
        <h3>{{ $t('dashboard') }}</h3>
        <h2>{{ $t('welcome') }}</h2>
</div>

Now, when you start your project you will find that the text appears with the language you defined at the "locale" key, in the createI18n function.

To wrap up, integrating internationalization into Vue.js projects is vital for reaching a wider audience and enhancing user experience. With the i18n library, this process becomes straightforward, allowing developers to adapt their apps easily to different languages and regions.

We hope this guide has provided you with valuable insights to implement internationalization effectively in your Vue.js projects. Happy coding, and may your apps reach users around the world seamlessly!