Support Composition API

Hello and first of all, thank you for this awesome plugin. Until today I was used to write this.$t('to_translate') in my script with the corresponding

<i18n>
  to_translate: "translated"
</i18n>

in my SFC file when, for example, I wanted to use notifications. Soon, with the Composition Api RFC, a new syntax will be introduced to develop our components. In fact, it’s already available with this plugin. So I was wondering what is the correct way of doing it with the new syntax as this is not available in the setup function and even if $i18n.t is accessible through setup context root, it seems that the I18n tag is not yet processed. I know that I could define translations inside the messages property at init or try to access the translation inside the onMounted() lifecycle hook but it feels kind of hacky. Any thoughts?

[kazupon]

Hi!

I have plans to rewrite vue-i18n functionality from full scratch with composition API and TypeScript in the next major version. I’ll keep the current vue-i18n API as compatible like the Vue object style API.

I’m developing some vue-i18n related tools (e.g. eslint-plugin-vue-i18n, vue-cli-plugin-i18n, and etc) and libraries (vue-i18n-locale-mesasge, vue-i18n-loader).

when I take a break these developing, I’ll try to start vue-i18n major version developing.

[snapwich]

If you’re using @vue/composition-api then the instance with your local component messages is available using getCurrentInstance.

e.g.

<i18n>
  {
    "en": {
      "localMessage": "Blah"
    }
  }
</i18n>

<template>
  <div>{{ message }}</div>
</template>

<script>
import { createComponent, ref, getCurrentInstance } from "@vue/composition-api";
export default createComponent({
  setup() {
    let vm = getCurrentInstance();
    let message = ref(vm.$i18n.t("localMessage"))
    return {
      message
    }
  };
})
</script>