Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

<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 {
      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 either:
The above to work
Alternatively, use the grandparents translation data in the grandchild
Alternatively, dynamically import translation data in the grandchild based on a prop(location of translation file to be imported)
Thanks
const i18n = new VueI18n({
    locale: yourLocale || DEFAULT_LOCALE, // set locale either from localStorage or config
    fallbackLocale: DEFAULT_LOCALE,
    messages: require('messages.json'), // set locale messages
    sharedMessages: require('other.json if exist'),
    silentFallbackWarn: true,
export default i18n;
Then call it from main.js to globalize:
import i18n from './plugins/i18n.js';
new Vue({
    i18n,
    router,
    render: h => h(App),
}).$mount('#app');
Then if you want to go on with custom messages, you can set it with i18n block like:
<script>
data(){
methods: ...
i18n: {
 messages: require(your json path....)
</script>
Then you can call it like:
$t('test');
                Per: https://kazupon.github.io/vue-i18n/api/#vue-injected-methods i should be able to set translation values and it will return the correct translation but it doenst work
– Jujubes
                Oct 13, 2019 at 13:58
<template>
  <st-age v-bind:menus="menu" v-bind:locale="locale[$i18n.locale].menu">
    <template v-slot:content>message: {{ $route.params }}</template>
    <template v-slot:footer>
      <div>{{ $t('menu.file.label') }}</div>
    </template>
  </st-age>
</template>
<script>
import menu from './menu'
import locale from '@/locales/modules/messaging.json'
export default {
  data() {
    return {
      menu: menu,
      locale: locale
  i18n: {
    messages: locale
  components: {
    'st-age': () => import('@/components/layout/stage/container')
</script>
<style>
</style>
locale[$i18n.locale].menu is passing the translation data i actually need and not the entire object(which works too)
in the child component, i just pass this data as a prop to the grandchild
in the grandchild i
 mounted() {
    this.$i18n.setLocaleMessage(this.$i18n.locale, this.locale)
where this.locale is the translation data and $t('file') yields whatever i set as en.menu.file in the global translation data originally imported
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.