How to internationalize javascript messages in grails Application

Internationalization is easy in grails gsp pages with the help of property file and g:message tag of grails.But sometimes we have to show the messages in javascript files according to locale. 

In that case we have two ways to do so :

1 - Each time we have to pass the i18n messages from controller to client side in response.

2 - Internationalize the required messages on the client side instead of server side.

First approach is not suggested in case of javascript as it is not a good practice to fetch the i18n messages each time from server.

Second approach is good and suggested as it makes the work easier as we have not to make the server call when require internationalized message most of the time.

So the question is how to localize messages in javascript?

There are plugins in grails to do so like JAWR and i18n-asset-pipeline plugin. As I went through both of them, found that JAWR requires lots of configuration and little bit tricky to use but i18n-asset-pipeline plugin is easy to understand and requires less effort and configuration.

Usage : i18n files in grails-app/i18n:

In messages.properties

user.title= "Username"
user.password = "Password"

In messages_fr.properties

user.title= "nom d'utilisateur"
user.password = "mot de passe"

How to use i18n-asset-pipeline ?

We have to do three simple steps to implement this.

1.In grails i18n property files are stored in grails-app/i18n. To implement localization in javascript we have to define same i18n files set in grails-app/assets/javascript like :

messages.i18n
messages_fr.i18n

2. In grails-app/i18n, files contains key value pair but in grails-app/assets/javascript, files will contain only keys that we want to internationalize not the values. In this case I want to localize only username so I added only username only in both above define files.

user.title

3. Now its time to use the things in javascript. In main layout gsp define grails tag to load the locale like :

<asset:i18n name="texts" locale="${locale}" />

locale - Locale that should be loaded

name - name of i18n file to be loaded.

Default name is messages. and in java script file use :

alert($L("user.title");

Done. Now you can localize any message in javascript.

THANKS