Vite Integration

Lingo.dev Compiler integrates directly with Vite to provide build-time localization for React applications.

Follow these steps to add multilingual support to your Vite + React application.

Or explore the Vite demo project to try the Compiler in action.

Prerequisites

  • Vite 4+
  • React 18+
  • Node.js 18 or higher

Step 1. Install Package

Install the lingo.dev package:

npm install lingo.dev

Step 2. Configure Vite

Import and configure the compiler in your vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  plugins: [react()],
  // Your existing Vite configuration
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

Step 3. Set Up Authentication

Create a free account at groq.com and add your API key:

# .env
GROQ_API_KEY=gsk_...

Step 4. Add Provider

Import the provider in your main entry file (src/main.tsx):

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { LingoProviderWrapper, loadDictionary } from "lingo.dev/react/client";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <LingoProviderWrapper loadDictionary={(locale) => loadDictionary(locale)}>
      <App />
    </LingoProviderWrapper>
  </React.StrictMode>,
);

Step 5. Optional: Add Locale Switcher

Create a language switcher component in your App or Header:

import { LocaleSwitcher } from "lingo.dev/react/client";

function App() {
  return (
    <div className="App">
      <header>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </header>
      <main>
        <h1>Welcome to our app</h1>
        <p>This content is automatically translated</p>
      </main>
    </div>
  );
}

export default App;

Step 6. Build and Test

Start your development server:

npm run dev

The compiler will automatically:

  1. Scan your React components for translatable content
  2. Extract translation keys
  3. Generate AI-powered translations
  4. Create optimized translation files in the lingo/ directory

Visit http://localhost:5173 to see your multilingual app in action.

Configuration Options

You can customize the compiler behavior:

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

Development Features

Hot Module Replacement

The compiler supports Vite's HMR for translation updates:

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>Welcome to our app</h1>
      <p>Edit this text and see translations update automatically</p>
    </div>
  );
}

Build Optimization

Vite's build optimization works seamlessly with the compiler:

  • Code splitting includes translation bundles
  • Asset optimization handles translation files efficiently
  • Tree shaking removes unused translations

Example Project Structure

my-vite-app/
├── src/
│   ├── components/
│   │   └── Welcome.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── lingo/           # Generated translation files
│       ├── meta.json
│       └── dictionary.js
├── vite.config.ts
├── package.json
└── .env

Production Deployment

  1. Build your application:

    npm run build

  2. Commit translation files:

    git add src/lingo/
git commit -m "Add translations"

  3. Deploy using your preferred platform (Vercel, Netlify, etc.)

Your Vite app will serve localized content automatically based on user preferences.

Troubleshooting

Common Issues

Translations not generating: Ensure your GROQ_API_KEY is set correctly in your .env file.

Build errors: Make sure the lingo/ directory is included in your version control.

HMR not working: Restart the development server after adding new translatable content.

Next Steps