Show: Playframework's i18n integrated with Vue.js (possibly with other JS frameworks as well)

I’d like to share our new sbt plugin, sbt-i18n, which unifies i18n mechanism on Play with vue-i18n. It can be extended to support other JS frameworks as well.

The plugin compiles conf/messages to a Javascript file that can be used by vue-i18n. It supports fallback to the default locale as well if some keys don’t exist.

The usage looks like this:

@(messages: play.api.i18n.Messages)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
<script src="@routes.Assets.versioned("locale/messages." + messages.lang.code + ".js")" type="text/javascript"></script>

<p>From server side: <strong>@messages("home.messageFromServerSide")</strong></p>

<p id="app">From client side: <strong>{{ $t('home.messageFromClientSide') }}</strong></p>

<script>
  var app = new Vue({el: '#app'})
</script>

Here’s a working example: https://github.com/GIVESocialMovement/sbt-i18n/tree/master/test-play-project
Here’s our blog post about it: https://give.engineering/2018/06/18/i18n-with-playframework-and-vue.html

If you are looking for an i18n solution for both backend and frontend, please try it and let me know if it works out for your situation. (The setup is a little bit more involved than I’d like it to be)

2 Likes

Cool idea, I’m thinking about doing i18n and routes generation with Typescript for use with Angular applications.

1 Like