Как сделать перевод в Nuxt, с помощью i18n, в asyncData?

Question

[EvgeniySaschenko]

Есть необходимость создать хлебные крошки, которые будут поддерживать интернационализацию.

Хлебные крошки отдельный компонент, данные в который передаются через Vuex. На страницах вызывается метод "asyncData" - чтобы крошки генерировались на сервере. Но перевод при этом не срабатывает.

Подскажите пожалуйста в чём загвоздка?

Вызов на странице:

i18n: {
    messages: {
      ru: require('./page-ru.json'),
      uk: require('./page-uk.json'),
    },
  },
  asyncData({ app, store }) {
    store.commit('breadcrumbs/setData', [
      {
        name: app.i18n.t('текст для перевода страницы'),
        path: 'url',
      },
    ]);
  },

i18n инициализирован так:

export default ({ app }) => {
  app.i18n = new VueI18n({
    locale: app.$cookies.get('language') || 'ru',
    fallbackLocale: 'uk',
    silentTranslationWarn: true,
  });
};

Comments

[Сергей Бурдужа]

Решили проблему?

[EvgeniySaschenko]

Сергей Бурдужа, передать перевод на сервере со страницы в layout (в layout находятся крошки) с помощью asyncData не получается, думаю что это связано с тем что сначала создаётся layout, а потом страница.

Можете попробовать такое:
1. В компоненте layout, подключить / получать сервера все переводы крошек

data() {
    return {
      crumbs: ''
    }
  },
  // Получаем данные при первом посещении
  fetch() {
    this.crumbs = this.getCrumbs();
  },
  // Получаем данные при смене url
  watch: {
    $route() {
      this.crumbs = this.getCrumbs();
    }
  },
  methods: {
    getCrumbs() {
      return 'крошки для этой страницы'
    }
  }

или

2. Подключать компонент крошек на каждой странице, в этом случае можно будет передать данные со страницы

[Сергей Бурдужа]

EvgeniySaschenko, Спасибо