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)