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=""></script>
<script src=""></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>

  var app = new Vue({el: '#app'})

Here’s a working example:
Here’s our blog post about it:

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)


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

1 Like