Gettext Extractor Vue Support

5.2.0 · active · verified Sun Apr 19

gettext-extractor-vue is a specialized extension for the `gettext-extractor` library, designed to facilitate the extraction of gettext messages from Vue Single File Components (SFCs). It works by decorating `gettext-extractor`'s `JSExtractor` to preprocess `.vue` files, transforming their template and script sections into standard JavaScript that the core `gettext-extractor` can then parse. The current stable version is 5.2.0. This package differentiates itself by offering compatibility with both Vue 2 applications (requiring `vue-template-compiler` as a user-provided dependency) and Vue 3 applications (requiring `@vue/compiler-sfc`). Additionally, it provides utility functions, such as `decorateExtractorWithHelpers`, to add message transformation capabilities to the core `GettextExtractor` instance. While its release cadence isn't strictly defined, it generally aligns with major versions of `gettext-extractor` and Vue itself to ensure ongoing compatibility.

Common errors

```
Error: Cannot find module 'vue-template-compiler' or 'Error: Cannot find module '@vue/compiler-sfc''
```
cause The required Vue compiler dependency (either for Vue 2 or Vue 3) was not installed in your project.

fix Install the appropriate Vue compiler: `npm install vue-template-compiler` for Vue 2, or `npm install @vue/compiler-sfc` for Vue 3.
```
TypeError: extractor.createJsParser is not a function
```
cause The `gettext-extractor` package is either not installed, or an incompatible version is installed, preventing access to its core methods.

fix Ensure `gettext-extractor` is correctly installed and its version satisfies the peer dependency requirement: `npm install gettext-extractor`.

Warnings

gotcha This package is an extension for `gettext-extractor` and requires it as a peer dependency. Ensure `gettext-extractor` is installed in your project at a compatible version.
Fix: Install `gettext-extractor`: `npm install gettext-extractor` or `yarn add gettext-extractor`.
gotcha To parse Vue Single File Components, you must explicitly provide the correct Vue compiler: either `vue-template-compiler` for Vue 2 or `@vue/compiler-sfc` for Vue 3. These are peer dependencies of `gettext-extractor-vue` and must be installed by your project.
Fix: For Vue 2: `npm install vue-template-compiler`. For Vue 3: `npm install @vue/compiler-sfc`.
gotcha While the README examples primarily use CommonJS `require()`, the package generally supports both CommonJS and ES Modules. Be consistent with your project's module system. If using ES Modules, use `import` statements.
Fix: For ESM: `import { func } from 'gettext-extractor-vue';`. For CJS: `const { func } = require('gettext-extractor-vue');`.

Install

npm install gettext-extractor-vue npm
yarn add gettext-extractor-vue yarn
pnpm add gettext-extractor-vue pnpm

Imports

decorateJSParserWithVueSupport
wrong:
```
const { decorateJSParserWithVueSupport } = require('gettext-extractor-vue');
```
correct:
```
import { decorateJSParserWithVueSupport } from 'gettext-extractor-vue';
```
The recommended ES Module import for modern JavaScript projects, though CommonJS `require()` is also supported.

decorateExtractorWithHelpers

wrong:

const { decorateExtractorWithHelpers } = require('gettext-extractor-vue');

correct:

import { decorateExtractorWithHelpers } from 'gettext-extractor-vue';

Utility function for adding message transformation, available via both ESM and CommonJS.

* as gettextVue
wrong:
```
import gettextVue from 'gettext-extractor-vue';
```
correct:
```
import * as gettextVue from 'gettext-extractor-vue';
```
Wildcard import for accessing all named exports from the package in an ES Module context.

Quickstart

This quickstart demonstrates how to set up `gettext-extractor` with `gettext-extractor-vue` to parse both JavaScript and Vue Single File Components (SFCs), saving extracted messages to a `.pot` file. It shows how to integrate `decorateJSParserWithVueSupport` and highlights the conditional requirement for `vue-template-compiler` (for Vue 2) or `@vue/compiler-sfc` (for Vue 3).

const { GettextExtractor, JsExtractors } = require('gettext-extractor');
const { decorateJSParserWithVueSupport } = require('gettext-extractor-vue');

const extractor = new GettextExtractor();

const jsParser = extractor.createJsParser([
  JsExtractors.callExpression('getText', {
    arguments: {
      text: 0,
      context: 1,
    },
  }),
  JsExtractors.callExpression('getPlural', {
    arguments: {
      text: 1,
      textPlural: 2,
      context: 3,
    },
  }),
]);

// For vue@2 support, ensure vue-template-compiler is installed
let vueParser = decorateJSParserWithVueSupport(jsParser, {
  vue2TemplateCompiler: require('vue-template-compiler'),
});
// For vue@3 support, ensure @vue/compiler-sfc is installed
// vueParser = decorateJSParserWithVueSupport(jsParser, {
//   vue3TemplateCompiler: require('@vue/compiler-sfc'),
// });

vueParser.parseFilesGlob('./src/**/*.@(js|vue)');

extractor.savePotFile('./messages.pot');

extractor.printStats();

view raw JSON →