Is there a I18n on a Rails+Vue.js instance which share locales in a single repository?

Question

We are introducing Vue.js to manage front end. At the same time we are considering moving to an other way to manage I18n within the whole application stack.

The initial planned solution was to use a gettext implementation, like fast_gettext. But due to Vue.js arrival, one additional constraint is to be able to use the same locale repository for both traditional Rails views and Vue.js rendered elements.

One possible valid solution would be to have a way to execute rails code similar to what's possible to do with erb files.

For information, the Vue.js was installed through webpacker, as gems we found seemed outdated.

Answer 1

You can use i18n-js.
https://github.com/fnando/i18n-js

It allows you to use your config/locale yaml files as if they were part of your vue code. After following the install instructions from the project page, you could create a mixin like this:

export default {
  methods: {
    t: (...args) => I18n.t(...args),
    currentLocale: () => I18n.currentLocale()
  }
}

Import it like this:

<template></template>

<script>
import i18n from "../mixins/i18n"

export default {
  mixins: [i18n]
}
</script>

And use like this:

<button @click="toggleItem(content)">
  <span v-if="isSelected">
    {{ t("remove") }}
  </span>
  <span v-else>
    {{ t("add") }}
  </span>
</button>