Skip to main content

Vite Plugin

@lingui/vite-plugin is a Vite plugin, which compiles Lingui catalogs on the fly and provides additional required configuration for Vite.


Refer to Setup with Vite for a full installation guide.

npm-version npm-downloads


Install @lingui/vite-plugin as a development dependency:

npm install --save-dev @lingui/vite-plugin


Simply add @lingui/vite-plugin inside your vite.config.ts:

import { UserConfig } from "vite";
import { lingui } from "@lingui/vite-plugin";

const config: UserConfig = {
plugins: [lingui()],

Then in your code all you need is to use dynamic imports to load only necessary catalog. Extension is mandatory.

export async function dynamicActivate(locale: string) {
const { messages } = await import(`./locales/${locale}.po`);

i18n.load(locale, messages);

If you are using a format that has a different extension than *.po, you need to specify the ?lingui suffix:

const { messages } = await import(`./locales/${language}.json?lingui`);

See the guide about dynamic loading catalogs for more info.

See Vite's official documentation for more info about Vite dynamic imports.


You also need to set up babel-plugin-macros to support macros.