How to make multilingual (i18n) an existing Vite and React application afterward (i18n guide 2026)

VideoCodeDemo

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-vite-react-template.vercel.app

Open embedded page in fullscreen

See Application Template on GitHub.

Table of Contents

Why is it hard to internationalize an existing application?

If you've ever tried to add multiple languages to an app that was built for just one, you know the pain. It's not just "hard", it's tedious. You have to comb through every single file, hunt down every string of text, and move them into separate dictionary files.

Then comes the risky part: replacing all that text with code hooks without breaking your layout or logic. It's the kind of work that halts new feature development for weeks and feels like endless refactoring.

What is the Intlayer Compiler?

The Intlayer Compiler was built to skip that manual grunt work. Instead of you manually extracting strings, the compiler does it for you. It scans your code, finds the text, and uses AI to generate the dictionaries behind the scenes. Then, it modifies your code during the build to inject the necessary i18n hooks. Basically, you keep writing your app as if it's single-language, and the compiler handles the multilingual transformation automatically.

Doc Compiler: /en/doc/compiler

Limitations

Because the compiler performs code analysis and transformation (inserting hooks and generating dictionaries) at compile time, it can slow down the build process of your application.

To mitigate this impact during development, you can configure the compiler to run in 'build-only' mode or disable it when not needed.

Step-by-Step Guide to Set Up Intlayer in a Vite and React Application

1. 1

   Install Dependencies

   Install the necessary packages using npm:

   bash

   Copy content

   Copy code

   Copy the code to the clipboard

   npx intlayer init --interactive
   

   the --interactive flag is optional. Use intlayer-cli init if you're an AI agent.

   This command will detect your environment and install the required packages. For example:

   bash

   Copy content

   Copy code

   Copy the code to the clipboard

   npm install intlayer react-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer The core package that provides internationalization tools for configuration management, translation, content declaration, transpilation, and CLI commands.

   • react-intlayer The package that integrates Intlayer with React application. It provides context providers and hooks for React internationalization.

   • vite-intlayer Includes the Vite plugin for integrating Intlayer with the Vite bundler, as well as middleware for detecting the user's preferred locale, managing cookies, and handling URL redirection.

2. 2

   Configure Your Project

   Create a config file to configure the languages of your application:

   intlayer.config.ts

   Copy content

   Copy code

   Copy the code to the clipboard

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
       defaultLocale: Locales.ENGLISH,
     },
     compiler: {
       /**
        * Indicates if the compiler should be enabled.
        */
       enabled: true,
   
       /**
        * Output directory for the optimized dictionaries.
        */
       output: ({ locale, key }) => `compiler/${locale}/${key}.json`,
   
       /**
        * Inset only content in generated file, without key.
        */
       noMetadata: false,
   
       /**
        * Dictionary key prefix
        */
       dictionaryKeyPrefix: "", // Remove base prefix
   
       /**
        * Indicates if the components should be saved after being transformed.
        *
        * - If `true`, the compiler will rewrite the component file in the disk. So the transformation will be permanent, and the compiler will skip the transformation for the next process. That way, the compiler can transform the app, and then it can be removed.
        *
        * - If `false`, the compiler will inject the `useIntlayer()` function call into the code in the build output only, and keep the base codebase intact. The transformation will be done only in memory.
        */
       saveComponents: false,
     },
     ai: {
       provider: "openai",
       model: "gpt-5-mini",
       apiKey: process.env.OPEN_AI_API_KEY,
       applicationContext: "This app is an map app", // Note: you can customize this app description
     },
   };
   
   export default config;
   

   Note: Ensure you have your OPEN_AI_API_KEY set in your environment variables.

   Through this configuration file, you can set up localized URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the configuration documentation.

3. 3

   Integrate Intlayer in Your Vite Configuration

   Add the intlayer plugin into your configuration.

   vite.config.ts

   Copy content

   Copy code

   Copy the code to the clipboard

   import { defineConfig } from "vite";
   import react from "@vitejs/plugin-react-swc";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       react(),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

   The intlayer() Vite plugin is used to integrate Intlayer with Vite. It ensures the building of content declaration files and monitors them in development mode. It defines Intlayer environment variables within the Vite application. Additionally, it provides aliases to optimize performance.

   The intlayerCompiler() Vite plugin is used to extract content from component and write .content files.

   Since Intlayer v9, the compiler is bundled directly into the intlayer() plugin and activates automatically once compiler.enabled is set with a compiler.output path. Registering intlayerCompiler() separately as shown below is now optional — it deduplicates itself if also added. See the v9 release notes.

4. 4

   Compile your code

   Just write your components with hardcoded strings in your default locale. The compiler handles the rest.

   Example of how your page might look:

   CodeOutput

   src/App.tsx

   Copy content

   Copy code

   Copy the code to the clipboard

   import { useState, type FC } from "react";
   import reactLogo from "./assets/react.svg";
   import viteLogo from "/vite.svg";
   import "./App.css";
   import { IntlayerProvider } from "react-intlayer";
   
   const AppContent: FC = () => {
     const [count, setCount] = useState(0);
   
     return (
       <>
         <div>
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} className="logo" alt="Vite logo" />
           </a>
           <a href="https://react.dev" target="_blank">
             <img src={reactLogo} className="logo react" alt="React logo" />
           </a>
         </div>
         <h1>Vite + React</h1>
         <div className="card">
           <button onClick={() => setCount((count) => count + 1)}>
             count is {count}
           </button>
           <p>
             Edit <code>src/App.tsx</code> and save to test HMR
           </p>
         </div>
         <p className="read-the-docs">
           Click on the Vite and React logos to learn more
         </p>
       </>
     );
   };
   
   const App: FC = () => (
     <IntlayerProvider>
       <AppContent />
     </IntlayerProvider>
   );
   
   export default App;
   

   i18n/app-content.content.json

   Copy content

   Copy code

   Copy the code to the clipboard

   {
     key: "app-content",
     content: {
       nodeType: "translation",
       translation: {
         en: {
           viteLogo: "Vite logo",
           reactLogo: "React logo",
           title: "Vite + React",
           countButton: "count is",
           editMessage: "Edit",
           hmrMessage: "and save to test HMR",
           readTheDocs: "Click on the Vite and React logos to learn more",
         },
         fr: {
           viteLogo: "Logo Vite",
           reactLogo: "Logo React",
           title: "Vite + React",
           countButton: "compte est",
           editMessage: "Modifier",
           hmrMessage: "et enregistrer pour tester HMR",
           readTheDocs: "Cliquez sur les logos Vite et React pour en savoir plus",
         },
       }
     }
   }
   

   src/App.tsx

   Copy content

   Copy code

   Copy the code to the clipboard

   import { useState, type FC } from "react";
   import reactLogo from "./assets/react.svg";
   import viteLogo from "/vite.svg";
   import "./App.css";
   import { IntlayerProvider, useIntlayer } from "react-intlayer";
   
   const AppContent: FC = () => {
     const [count, setCount] = useState(0);
     const content = useIntlayer("app-content");
   
     return (
       <>
         <div>
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} className="logo" alt={content.viteLogo.value} />
           </a>
           <a href="https://react.dev" target="_blank">
             <img
               src={reactLogo}
               className="logo react"
               alt={content.reactLogo.value}
             />
           </a>
         </div>
         <h1>{content.title}</h1>
         <div className="card">
           <button onClick={() => setCount((count) => count + 1)}>
             {content.countButton} {count}
           </button>
           <p>
             {content.editMessage} <code>src/App.tsx</code> {content.hmrMessage}
           </p>
         </div>
         <p className="read-the-docs">{content.readTheDocs}</p>
       </>
     );
   };
   
   const App: FC = () => (
     <IntlayerProvider>
       <AppContent />
     </IntlayerProvider>
   );
   
   export default App;
   

   • IntlayerProvider is used to provide the locale to nested components.
5. 6

   Change the language of your content

   Optional

   To change the language of your content, you can use the setLocale function provided by the useLocale hook. This function allows you to set the locale of the application and update the content accordingly.

   src/components/LocaleSwitcher.tsx

   Copy content

   Copy code

   Copy the code to the clipboard

   import type { FC } from "react";
   import { Locales } from "intlayer";
   import { useLocale } from "react-intlayer";
   
   const LocaleSwitcher: FC = () => {
     const { setLocale } = useLocale();
   
     return (
       <button onClick={() => setLocale(Locales.English)}>
         Change Language to English
       </button>
     );
   };
   

   To Learn more about the useLocale hook, refer to the documentation.

6. 7

   Fill missing translation

   Optional

   Intlayer provide a CLI tool to help you fill missing translations. You can use the intlayer command to test and fill missing translations from your code.

   bash

   Copy content

   Copy code

   Copy the code to the clipboard

   npx intlayer test         # Test if there is missing translations
   

   bash

   Copy content

   Copy code

   Copy the code to the clipboard

   npx intlayer fill         # Fill missing translations
   

   For more details, refer to the CLI documentation

(Optional) Sitemap and robots.txt (build-time)

Intlayer includes formatters such as generateSitemap and getMultilingualUrls that produce crawler-ready multilingual sitemap.xml and robots.txt output you can write into your project’s public/ folder. In practice you run a small Node script before Vite (for example predev / prebuild npm hooks) so those files exist when you build or serve the app.

Sitemap

Intlayer’s sitemap generator respects your locale setup and includes the usual metadata for crawlers.

The generated sitemap supports the xhtml:link namespace (hreflang XML extensions). Unlike basic generators that only emit flat URLs, Intlayer wires bidirectional links between every localized variant of each page (for example /about, /fr/about, or /about?lang=fr, depending on your routing mode), which helps search engines relate localized URLs.

Robots.txt

Use getMultilingualUrls so Disallow entries cover every localized spelling of sensitive paths.

1. Add generate-seo.mjs at the project root

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

intlayer must be installed so the script can import it. Set SITE_URL in the environment for production (for example in CI).

Prefer generate-seo.mjs for Node ESM. If you use generate-seo.js instead, ensure "type": "module" is set in package.json, or run Node with ESM enabled.

2. Run the script before Vite

{
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Adjust if you use pnpm or yarn. You can also invoke the same script from CI or another step if that fits your workflow.

Git Configuration

It is recommended to ignore the files generated by Intlayer. This allows you to avoid committing them to your Git repository.

To do this, you can add the following instructions to your .gitignore file:

# Ignore the files generated by Intlayer
.intlayer

VS Code Extension

To improve your development experience with Intlayer, you can install the official Intlayer VS Code Extension.

Install from the VS Code Marketplace

This extension provides:

• Autocompletion for translation keys.
• Real-time error detection for missing translations.
• Inline previews of translated content.
• Quick actions to easily create and update translations.

For more details on how to use the extension, refer to the Intlayer VS Code Extension documentation.

Go Further

To go further, you can implement the visual editor or externalize your content using the CMS.

Frequently Asked Questions