Skip to main content

Vue.js Extractor

The @lingui/extractor-vue package provides a custom extractor that handles Vue.js files.

Installation​

npm install --save-dev @lingui/extractor-vue

Usage​

It is required that you use JavaScript or TypeScript for your Lingui configuration.

lingui.config.{js,ts}
import { defineConfig } from "@lingui/cli";
import { createVueExtractor } from "@lingui/extractor-vue";
import babel from "@lingui/cli/api/extractors/babel";

export default defineConfig({
  locales: ["en", "nb"],
  sourceLocale: "en",
  catalogs: [
    {
      path: "<rootDir>/src/{locale}",
      include: ["<rootDir>/src"],
    },
  ],
  extractors: [babel, createVueExtractor()],
});

Options​

Vue Reactivity Transform​

If your project uses Vue's Reactive Props Destructure, enable vueReactivityTransform to ensure message IDs match between extraction and runtime:

lingui.config.{js,ts}
import { createVueExtractor } from "@lingui/extractor-vue";

export default defineConfig({
  // ... other config
  extractors: [babel, createVueExtractor({ reactivityTransform: true })],
});

See Also​