$t with values attribute is not translating

[mjmnagy]

Hi,

I am trying to import a .json file to use as the translation file.

<template>
    <template v-slot:footer>
      <div>{{ $t('menu.file.new.label', $i18n.locale, locale) }}</div> <--Issue outputs menu.file.new.label
    </template>
</template>

<script>
import locale from '@/locales/modules/messaging.json'

export default {
  data() {
    return {
      menu: menu,
      locale: locale
    }
  }
}
</script>

the locale from messaging.json does not have any errors and works if i instead added the following to the top

<i18n src="@/locales/modules/messaging.json"></i18n>

and changed the function parameters to exclude $i18n.locale and locale and it works. Unfortunately, this is not an option as i want to pass the data to a grandchild component. However, if i can configure the grandchild to use their grandparents translation data that works too..

how can i get

1. either the above to work
2. Alternatively, use the grandparents translation data in the grandchild
3. Alternatively, dynamically import translation data in the grandchild based on a prop(location of translation file to be imported)

Thanks

[kazupon]

Maybe, I think you can resolve these use the shared messages.

See the docs:
https://kazupon.github.io/vue-i18n/guide/component.html#shared-locale-messages-for-components