Nuxt-i18n: как загружать сообщения асинхронно? - PullRequest
Новая
       70

Nuxt-i18n: как загружать сообщения асинхронно?

0 голосов
/ 02 октября 2018

Я создаю многоязычное веб-приложение Nuxt.Используя этот пример из официальной документации (Codepen ссылка ), я больше не хочу использовать локальные файлы JSON, где мои переводы сохраняются для работы, как определено в коде ниже: 

messages: {
      'en': require('~/locales/en.json'), # I want to get this asynchronously from an HTTP URL
      'fr': require('~/locales/fr.json') # I want to get this asynchronously from an HTTP URL
    }

Интересно, какие доступные альтернативы для асинхронной установки значений en и fr, вместо этого считывая данные JSON из URL?

plugins / i18n.js: 

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
  // Set i18n instance on app
  // This way we can use it in middleware and pages asyncData/fetch
  app.i18n = new VueI18n({
    locale: store.state.locale,
    fallbackLocale: 'en',
    messages: {
      'en': require('~/locales/en.json'), # How to get this asynchronously?
      'fr': require('~/locales/fr.json') # # How to get this asynchronously?
    }
  })

  app.i18n.path = (link) => {
    if (app.i18n.locale === app.i18n.fallbackLocale) {
      return `/${link}`
    }

    return `/${app.i18n.locale}/${link}`
  }
}

Что я пробовал : 

messages: {
      'en': axios.get(url).then((res) => {        
         return res.data
        } ),
      'fr': require('~/locales/fr.json')
    }

Где url указывает на файл /locals/en.json, который размещен в моем профиле Github.

1 Ответ

0 голосов
/ 05 октября 2018

У меня есть решение с localise.biz и перекрестной выборкой

Сначала добавьте async к функции плагинов plugins / i18n.js и добавьте await к вызовам удаленного перевода: 

import Vue from 'vue';
import VueI18n from 'vue-i18n';

import getMessages from './localize';

Vue.use(VueI18n);

export default async ({ app, store }) => {
    app.i18n = new VueI18n({
        locale: store.state.locale,
        fallbackLocale: 'en',
        messages: {
            'en': await getMessages('en'),
            'fr': await getMessages('fr')
        }
    });

    app.i18n.path = (link) => {
         if (app.i18n.locale === app.i18n.fallbackLocale) return `/${link}`;

         return `/${app.i18n.locale}/${link}`;
    }
}

И создать новую функцию для получения удаленного перевода: 

import fetch from 'cross-fetch';

const LOCALIZE_API_KEY = 'XXXXXXXXXXX';
const LOCALIZE_URL = 'https://localise.biz/api/export/locale';
const HEADERS = {
    'Authorization': `Loco ${LOCALIZE_API_KEY}`
};

const getMessages = async (locale) => {
const res = await fetch(`${LOCALIZE_URL}/${locale}.json`, { headers: HEADERS });

if (res.status >= 400) throw new Error("Bad response from server");

    return await res.json();
};

export default getMessages;
...