How to localize a site on vue-i18n without JSON files?

Question

Internationalization and localization

Good afternoon,

I'm making a site on vue , I need localization, I tried the vue-i18n plugin , but I can't figure out if it's possible to do localization without creating an additional JSON file.

The idea is this - there are inserts $t("") - if the language is Russian, then the value that is indicated in brackets is displayed.
If the language is English, then the values ​​in parentheses are collected into an object, sent by AJAX to the server, the
server searches the database by keys ("Site Title") for the necessary values ​​in English and sends us JSON with translation.

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

JSON with translation

{
"Site title": "Site Title",
"Text text text": "Text text text",
}

Answer 1

Everything in vue is reactive and dynamic. Components are loaded only when they are needed. You can't just take and "collect everything into an object" at the execution stage, because it is completely unknown when and how the function will be called (yes, it's a regular function) $t.
You can only go through the sources beforehand (at the compilation stage?) and pull out all calls to $t in json in advance.

Answer 2

You need this option: https://kazupon.github.io/vue-i18n/guide/lazy-load...
See example. If Russian is selected, then do nothing. Otherwise, you make a request to the server (see the line return import...)