# Vue.js Extractor

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

## Installation[​](#installation "Direct link to Installation")

* npm
* Yarn
* pnpm

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

```
yarn add --dev @lingui/extractor-vue
```

```
pnpm add --save-dev @lingui/extractor-vue
```

## Usage[​](#usage "Direct link to 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[​](#options "Direct link to Options")

### Vue Reactivity Transform[​](#vue-reactivity-transform "Direct link to Vue Reactivity Transform")

If your project uses Vue's [Reactive Props Destructure](https://github.com/vuejs/rfcs/discussions/502), 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[​](#see-also "Direct link to See Also")

* [Message Extraction](https://lingui.dev/guides/message-extraction.md)
* [Custom Extractor](https://lingui.dev/guides/custom-extractor.md)