Как сделать локализацию сайта на vue-i18n без JSON файлов?

Question

[EvgeniySaschenko]

Добрый день,

Делаю сайт на vue нужна локализация, пробовал плагин vue-i18n, но не могу понять можно ли сделать локализацию не создавая дополнительный JSON файл.

Идея такая - есть вставки $t("") - если язык русский то выводится значение которое указано в скобках.
Если язык английский то значения в скобках собираются в объект, его посылаем AJAXом на сервер,
сервер ищет в базе по ключам ("Заголовок сайта") нужные значения на английском и отправляет нам JSON c переводом.

<template>
  <div class="container">
    <h1>{{ $t("Заголовок сайта") }}</h1>
    <p>{{ $t("Текст текст текст") }}</p>
  </div>
</template>

JSON c переводом

{
"Заголовок сайта": "Site Title",
"Текст текст текст": "Text text text",
}

Answer 1

[Aetae]

Всё в vue реактивиное и динамическое. Компоненты загружаются только тогда, когда они нужны. Нельзя просто взять и "собрать всё в объект" на этапе исполнения, потому что совершенно неизвестно когда и как будет вызвана функция(да-да, это обычная функция) $t.
Вы можете разве что предварительно пройтись по исходникам(на этапе компиляции?) и вытянуть все вызовы $t в json заранее.

Comments

[EvgeniySaschenko]

Похоже мне нужно будет сформировать JSON для каждой страницы отдельно. Подскажите пожалуйста а для такого есть стандартные решения?

[Aetae]

EvgeniySaschenko, что-то есть.
Сам не пробовал.

[EvgeniySaschenko]

Aetae,
Спасибо, буду разбираться с настройкой.

Answer 2

[Александр Виткалов]

Вам нужен этот вариант: https://kazupon.github.io/vue-i18n/guide/lazy-load...
Смотрите пример. Если выбран русский язык, то ничего не делаете. Иначе делаете запрос на сервер (смотри строку return import...)