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

Adding internationalization (i18n) to a Vite and React project from day one is relatively straightforward. But what happens when you already have a mature, production-ready single-language application and need to make it multilingual afterward?

If you have ever attempted this with traditional libraries like react-i18next or react-intl, you know the friction:

• Hunting down hardcoded strings across hundreds of JSX and TSX files.
• Manually creating nested JSON files and inventing arbitrarily named translation keys (components.header.title, etc.).
• Replacing JSX text with cumbersome translation hook calls (t('...')).
• Re-architecting client-side routing, state management, and locale switching logic.

In 2026, you do not have to rewrite your codebase to make your Vite and React application multilingual. With Intlayer, you can retrofit internationalization onto an existing app in minutes, using automated extraction, AI-powered translation, and non-invasive routing.

Looking for the complete, step-by-step technical guide for Vite and React? Check out our dedicated documentation: Translate Vite and React with Intlayer.

Table of Contents

The Retrofit Dilemma: Why Making an Existing Vite and React App Multilingual Is Hard

When internationalizing an existing Vite and React application, developers face three major obstacles:

1. Codebase Disruption: Manually extracting strings into JSON dictionaries requires modifying almost every component file. This produces huge git diffs, creates merge conflict risks, and introduces potential layout regressions.
2. Key Maintenance Overhead: Inventing keys like dashboard.hero.ctaButton for every text snippet slows development down and introduces cognitive load every time UI copy changes.
3. Translation Grunt Work: Once strings are extracted, populating dictionaries in 5, 10, or 20 languages involves endless copy-pasting or expensive external translation services.

Intlayer solves these challenges at the architectural level with compiler-assisted extraction, declarative component-level dictionaries, and seamless Vite integration.

Automated Content Extraction (No Manual String Hunting)

Instead of manually extracting every hardcoded string from your JSX, Intlayer provides two zero-friction paths:

Option A: The CLI Extractor (npx intlayer extract)

You can run Intlayer's extraction tool directly on your codebase:

npx intlayer extract

This command parses your React components, extracts user-facing strings, and automatically creates per-component content declaration files (.content.ts) right alongside your components. Your component logic remains declarative, clear, and fully type-safe without having to write a single translation key by hand.

Option B: The Intlayer Compiler (Build-Time Extraction)

With the Intlayer Compiler enabled in your configuration, you can continue writing your components with plain, hardcoded text in your default language. At build time, the compiler extracts the text and injects the localized content automatically:

// Write normal React code. The compiler extracts the text automatically
export default function App() {
  return (
    <section>
      <h1>Welcome to our platform</h1>
      <p>Start exploring our modern features today.</p>
    </section>
  );
}

Behind the scenes, Intlayer builds the dictionary and links the component to its localized content, completely eliminating manual refactoring.

In this case, it generates a src/App.content.ts declaration file with the following structure:

import { Dictionary } from "intlayer";

const content = {
  key: "app",
  content: {
    welcomeToOurPlatform: t({ en: "Welcome to our platform" }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
    }),
  },
};

export default content;

AI-Powered Translation with Your Favorite LLM

Once your content is extracted, translating it into dozens of languages should not take days. Intlayer includes a built-in AI translation CLI that integrates directly with OpenAI, Anthropic, DeepSeek, or Mistral using your own API keys:

npx intlayer fill

Configure your locales and AI provider in intlayer.config.ts:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.GERMAN],
    defaultLocale: Locales.ENGLISH,
  },
  ai: {
    provider: "openai",
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
    applicationContext:
      "Modern SaaS application and dashboard built with Vite and React",
  },
};

export default config;

Running npx intlayer fill populates your content declarations with high-quality translations for your configured locales:

import { Dictionary } from "intlayer";

const content = {
  key: "app",
  content: {
    welcomeToOurPlatform: t({
      en: "Welcome to our platform",
      fr: "Bienvenue sur notre plateforme",
      es: "Bienvenido a nuestra plataforma",
      de: "Willkommen auf unserer Plattform",
    }),
    startExploringOurModernFeaturesToday: t({
      en: "Start exploring our modern features today.",
      fr: "Découvrez nos fonctionnalités modernes dès aujourd'hui.",
      es: "Comience a explorar nuestras funciones modernas hoy.",
      de: "Entdecken Sie noch heute unsere modernen Funktionen.",
    }),
  },
};

export default content;

Because Intlayer provides high-level applicationContext to the LLM, generated translations preserve technical nuance, brand tone, and grammatical context far better than traditional generic translation tools.

To verify that no strings were missed before deploying to production:

npx intlayer test

Vite Integration and Provider Setup

Integrating Intlayer into Vite requires adding the plugin to vite.config.ts and wrapping your root component with IntlayerProvider:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [react(), intlayer()],
});

Since Intlayer v9, the compiler is bundled directly into the intlayer() plugin and activates automatically once compiler.enabled is configured in intlayer.config.ts.

Wrap your application with IntlayerProvider in your root component:

import { FC } from "react";
import { IntlayerProvider } from "react-intlayer";
import { MainContent } from "./MainContent";

const App: FC = () => {
  return (
    <IntlayerProvider>
      <MainContent />
    </IntlayerProvider>
  );
};

export default App;

Changing Locales Dynamically

Switch languages easily anywhere in your application using the useLocale hook:

import { FC } from "react";
import { Locales } from "intlayer";
import { useLocale } from "react-intlayer";

export const LocaleSwitcher: FC = () => {
  const { locale, setLocale, availableLocales } = useLocale();

  return (
    <select
      value={locale}
      onChange={(e) => setLocale(e.target.value as Locales)}
    >
      {availableLocales.map((loc) => (
        <option key={loc} value={loc}>
          {loc}
        </option>
      ))}
    </select>
  );
};

Multilingual SEO (Sitemap and Robots.txt)

Intlayer includes formatters such as generateSitemap and getMultilingualUrls that produce crawler-ready multilingual sitemap.xml and robots.txt output for static Vite deployments:

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 || "https://example.com").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.");

Add a prebuild hook to your package.json to run this script before vite build:

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

Deep-Dive: Ready for the Step-by-Step Implementation?

This guide provided a high-level overview of how to retrofit internationalization into an existing Vite and React app in 2026 without architectural headaches.

If you are ready to configure every part of your Vite and React application step-by-step, including detailed configuration options, TypeScript type safety, dynamic dictionaries, and visual editing, head over to our comprehensive documentation guide:

👉 Complete Guide to Translating Vite and React with Intlayer

Frequently Asked Questions (FAQ)