[feature request] Possibility to use component based translations in child components

[siFeiden]

Hi folks! First of all, thank you for all the work on vue-i18n!

I have the use case of a SPA where every page is a component. The page components are lazy-loaded and shown using vue-router. Additionally, each page has many smaller child components for the page content. Every page has translations which are independent of the other pages. The translations for a page are given as component based translations on the page's component. This means that the translations for a page are also lazy-loaded together with the page component.

The problem I encountered with this setup is that unlike global translations, component based translations cannot be used in the child components. I made an example that shows the problem: https://jsfiddle.net/d80o7mpL/

So right now, I see two ways to solve this: I can either import the translations for a page into every component that is used on a page. This makes reusing components on several pages more complicated because the component needs to know the translations for all pages. The other way is to pass down translated strings through props of the child components. This is okay for a few translations but does not scale well for many translations.

My feature request is to add an option (either global or local) that allows to use the component based translations of a component also in its child components. I think this would help structuring larger vue applications with many translations.

I'd be happy to help with a PR if the feature is approved !

[quebits]

Currently i'm solving this issue something like this:

// parent.vue

<template>
  <child :i18n-messages="$i18n.messages" />
</template>
<script>
export default {
  // ...
  i18n: {
    // ...
  }
}
</script>

// child.vue

<script>
export default child {
  // ...
  props: {
    i18nMessages: { type: Object, required: true }
  }
  // ...
  created () {
    Object.keys(this.i18nMessages).forEach(key => {
      this.$i18n.mergeLocaleMessage(key, this.i18nMessages[key])
    })
  }
}
</script>

it's ugly but works

[andreikondratev]

Are there any news on feature like this one?