Customize i18n localization for gender-specific cases in Vue

There are many languages on earth where the words used for males and females are different. In the software world, it is also needed. Sounds strange? Well, for me, it was. Let’s read the full article to understand this scenario.

Hello Readers,

It’s really been a long since I wrote my last blog.

Well, I bring a very unusual but interesting problem and solution too, of course, PJ ;)

Recently, I worked on an application that was in multi-languages, English, Hebrew, and Arabic. I had a use case that for Hebrew and Arabic the translation of the application should be managed according to the user’s gender because in these two languages every noun is assigned a gender, either masculine or feminine.

If I give you an example of this case, suppose there is a greetings message on the application’s dashboard page. For female users, it should be displayed as “Hello, female” and for male users, it should be displayed as “Hello, male”.

I was using the Vue-i18n package to manage the localization which makes the locales management easy. However, I had no idea how to categorize the locales as per the user’s gender in Vue-i18n.

Well, I started using this approach-

I created two folders named male & female inside the locales directory. Inside these folders, I created two files he.json (for Hebrew) and ar.json (for Arabic). I kept the English locale file en.json outside as in English there was no need for categorization.

The directory structure was something like this-

Well, organizing folders is not a big deal. :-D

When using Vue-i18n, we create a file i18n.js that is responsible for reading the locales folder, searching for the requested language file and providing the translated messages. The default i18n.js file looks like this-

I’ll not go much deeper into how Vue-i18n works as this would be irrelevant for now. To know about it, read here.

Important- Before we deep dive, I would like to say that whenever the user logs in to the application, I first manually set the i18n’s locale to the user’s language which can be “en”, “he” or “ar”, etc.

i18n.locale = <user_language>

Now, the challenge was to fetch the right language file situated inside the male and female folders and the en.json file which is in the parent (/locales) folder.

Well, I tried fetching the locale file dynamically as per the user’s gender.

What I did is, create a getRelevantLocale function and give this function the responsibility to decide what path should be followed to fetch the requested locale file.

It looks like this-

Pretty simple this getRelevantLocale function is, isn’t it? It is reading the user status from state and deciding the locale folder’s path as per the user’s gender.

But, what’s the problem then? It should work, right? Well, I thought too but require.context() function doesn’t think so.

It slapped an error to my face plus stopped my working application.

I didn’t understand why this error is occurring, I tried to debug this code back and forth and after reading something, I found that-

The arguments passed to require.context must be literals (fixed values not variables)!

Oops!

Then, I managed to modify my getRelevantLocale function like this-

This is pretty much the same as above the only difference is that require. context() function is written three times with different locale paths (passed as string literals not variables).

Then, in locales/male/he.json, I wrote-

in locales/female/he.json, I wrote-

In App.Vue component, I wrote-

Then, I logged in with a Hebrew male user and-

IT WORKED. IT PRINTED — “Hello, male”

Then, I logged in with a Hebrew female user and-

IT WORKED. IT PRINTED — “Hello, female”

The same testing I performed by writing some locale messages in ar.json and en.json and set i18n.locale to “ar” and “en” and tested by logging in with Male and Female users.

Woohoo, it worked so well. But, there was one more case I faced-

I had a feature in the settings for changing the application’s language. And because of that I need to read the right locale file again from the right folder if the language is being changed by user from the settings.

Well, it was very painless. I managed it by invoking a function updateLocaleMessages whenever the user switches the language.

This function simply receives the payload and, processes in order like-

1. It sets the requested locale to i18n’s locale property.
2. Then, it set the locale messages by reading those from the right locale file with the help of the loadLocaleMessages we created above.

So, this is how I cope-up with that locale management as per the user’s gender issue.

Well, this could not be a single solution I assume, If you have any other approach which is better and simpler than this, please let me know in the comments or you can email me at nehaswrankar988@gmail.com.

Thanks for reading this.

Happy reading!