Skip to main content

Vite Plugin

Vite is a blazing fast frontend build tool powering the next generation of web applications.

The @lingui/vite-plugin is a Vite plugin that compiles Lingui catalogs on the fly and provides the necessary configuration for seamless integration with Vite.

npm-version npm-downloads

Installation​

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

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

For a complete installation guide, see Installation and Setup.

Usage​

To integrate Lingui with Vite, add the @lingui/vite-plugin inside your vite.config.ts as follows:

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

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

Then use dynamic imports in your code to load only necessary catalog:

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

  i18n.load(locale, messages);
  i18n.activate(locale);
}

Remember that the file extension is mandatory.

tip

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 Also​