Automatically extract translation keys from templates and place them in location files

Couldn’t find a command for that in this project or in the web.

The workflow I wanted:

1. Write templates declaring translation keys (like: v-t="'cool_word'").
2. Run a command that will add all those translation keys to my locale json files.
3. Check the json files for empty translations and fill them.

This would be much better than adding each key manually to each locale file.

For now, I wrote this Python script as a workaround for some cases: https://gist.github.com/andresmrm/2c2f959a8a5b5d4fd7ab05063f437cc1

[luckylooke]

@rrd108 nice, I didnt know that… I am using vue-i18n-extract, but I will definitely check vue UI if it can be used for my usecase.

here is my script extracting keys from code with vue-i18n-extract

const VueI18NExtract = require('vue-i18n-extract').default;
const path = require('path');
const fs = require('fs');

const vueFilesPath = path.resolve(__dirname, '../src/**/*.?(vue)');
const keysFile = path.resolve(
  __dirname,
  '../src/assets/translations/keys.json'
);

let report = VueI18NExtract.createI18NReport(vueFilesPath, keysFile);

const keysFileContent = fs.readFileSync(keysFile, 'UTF8');
if (report.missingKeys && keysFileContent) {
  const messages = JSON.parse(keysFileContent);
  const missingKeys = report.missingKeys;
  missingKeys.forEach(missingKey => {
    const path = missingKey.path.split('.');
    const lastIndex = path.length - 1;
    let pointer = messages;
    for (let i = 0; i < lastIndex; i++) {
      const pathElement = path[i];
      if (!pointer[pathElement]) {
        pointer[pathElement] = {};
      } else if (typeof pointer[pathElement] !== 'object') {
        throw new Error(
          pathElement + ' in ' + missingKey.path + ' is not an object!'
        );
      }
      pointer = pointer[pathElement];
    }
    pointer[path[lastIndex]] = missingKey.path;
  });
  fs.writeFileSync(keysFile, JSON.stringify(messages, null, 2), 'UTF8');
}

console.log('report', report);

the advantage is that you can run this nodejs script in pipelines or another automated systems… I will check if vue UI can be used same way.

Happy coding! 😃

[rivaldi8]

I’ve been looking for some way to do this with Vue, but the only active project I’ve found is vue3-gettext. The problem is the documentation is a bit sparse and I’m not sure it supports all the features of vue-i18n so as to adopt it in a project. It would be great if vue-i18n supported this kind workflow. Specially being able to directly pass English strings instead of keys to $t()/i18n.t() would be a big improvement.

If it helps as a reference, ngx-translate-extract is a project that does this for Angular’s i18n ngx-translate library.