How to generate translations in a Vue I18n app?

Question

I am currently porting an app from server side rendering to Vue3. In the old PHP code base, translations where handled by the CakePHP framework like so:

<p>
   <?php echo __('Text to be translated'); ?>
</p>

The framework has a CLI component to find all calls to the __() function and it will output a file with all the messages that needs to be translated. If the translation text is empty, it will fallback to English as default. New or missing translations will be added to the translation file, so I can send the file to a translator to translate the new or missing parts.

The Vue3 frontend makes use of Vue I18n. In the HTML template, the translation looks like so

<p>
   {{ t("Text to be translated") }}
</p>

Unfortunately I did not find any information about how to automatically scrape through the files to generate or update a new locals/messages file. Adding every new text manually to all locale files would be a massive amount of work.

Basically I'm looking for a way, to generate the messages definition out of the templates.

<p>
   {{ t("Hello world") }}
   {{ t("This is awesome") }}
</p>

Into message keys to all locale files, so i can send the file to the translator

de: {
    'Hello world': '',
    'This is awesome': ''
},
ja: {
    'Hello world': '',
    'This is awesome': ''
},

Answer 1

The vue-i18n-extract library provides exactly the functionality.

It analysis the code and searches for $t() or t() messages and adds or removes missing keys into the language files.