Awesome

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:

1. Use vue-loader's component parser to extract the template content.
2. Use consolidate.js to compile the content to HTML.
3. 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

1. Install GNU gettext tools:
   • MacOS: brew install gettext && brew link --force gettext
   • Windows: need help
2. npm install --save-dev vue-webpack-gettext
3. Ensure that template language engines (that you're using) are installed, i.e. npm install --save-dev pug
   • Check consolidate.js for supported engines
4. To extract: node node_modules/vue-webpack-gettext/extract --output static/template.pot --src src
5. To compile: node node_modules/vue-webpack-gettext/compile --output static/locale --src static/translated --multiple
6. You can add npm scripts to your project's package.json to ease the tasks execution