vue-webpack-gettext
Extract and compile translations with vue-gettext and vue-loader, i.e. for .vue files with <template lang='pug'></template>
Introduction
vue-gettext has an example of Makefile that demonstrates how to extract and compile translations.
However, it requires own modifications to fit different requirements and is hard to share between projects. Furthermore, it's unable to extract strings from templates if you're using custom template language in vue files.
<template lang='pug'>
h1.hero
translate Please translate me
</template>
So, I created this helper library to:
1. Extract strings to be translated into a POT file
Since you're using custom template language, you should already have vue-loader
and the corresponding compiler, i.e. pug
in the project. By leveraging those, it will:
- Use vue-loader's component parser to extract the template content.
- Use consolidate.js to compile the content to HTML.
- Use easygettext to extract strings for translation.
2. Compile translated PO files into one or many translation JSON files
vue-gettext
's Makefile will group all PO files' content into a single JSON file, which may not be ideal if you only want to load one language at a time (translated strings can be humongous in size).
So this helper will give you an option to split them into a JSON file per language.
Usage
- Install GNU gettext tools:
- MacOS:
brew install gettext && brew link --force gettext
- Windows: need help
npm install --save-dev vue-webpack-gettext
- Ensure that template language engines (that you're using) are installed, i.e.
npm install --save-dev pug
- To extract:
node node_modules/vue-webpack-gettext/extract --output static/template.pot --src src
- To compile:
node node_modules/vue-webpack-gettext/compile --output static/locale --src static/translated --multiple
- You can add npm scripts to your project's package.json to ease the tasks execution