You Already Built Your App in Lovable. Now Make It Multilingual.
Here’s the exact workflow to go from single-language to fully translated using i18.dev’s built-in Lovable integration.
Step 1: Set Up Your i18.dev Project (30 seconds)
- Go to i18.dev and sign in (or create an account).
- Open the Projects page.
That’s it — you’re ready.
Step 2: Add Your i18.dev Environment Variables in Lovable
In the i18.dev project page, click the "Quick Setup" button to open the 1-minute getting-started guide.
then click the "Create Project + PAT" button to create a project and generate your Personal Access Token.
Then, ask Lovable to set up the keys for you:
"Set up keys for i18.dev — #keys from above ..."
Follow the chat instructions to complete the configuration.
Step 3: Choose “Lovable + React” as Your Library
i18.dev gives you two ready-made prompts. Click Copy on each and paste them directly into Lovable’s chat:
Prompt 1: “01-Setup prompt”
Paste this into Lovable. It will:
- Set up Lovable + React + FormatJS + i18.dev CLI
- Find your header and add a language switch component
- Create an i18.dev readme file in your project for reference
Prompt 2: “02-Ask to translate your home page”
Paste this into Lovable. It will:
- Find all user-facing strings in the selected page
- Replace strings with Lovable + React translation calls
- Push new locale strings to the i18.dev dashboard automatically
Step 4: Add a New Language
Once your strings are pushed to i18.dev:
- Open your i18.dev dashboard.
- Go to your project — "Quick Start Project".
- Click "Add Language" from the left sidebar.
- Select the language you want (e.g., Spanish, French, German, Japanese).
- i18.dev’s AI automatically translates all your strings instantly.
- Review & approve the translations (or invite a translator to refine).
Now here’s the smart part: as soon as you add the language, a notification pops up in the top-right corner:
Click "Copy prompt" — i18.dev has already written the exact prompt you need. Paste it into Lovable. Done.
No manual prompt writing. No guessing. i18.dev knows you just added Arabic, so it generates the precise prompt to pull ar.json, wire it into your app, and update the language switch list.
Step 5: The Mini Sidebar — Prompts on Demand
Anytime you need a prompt, click the mini sidebar Prompts button in the i18.dev project view. It shows:
Now you have a translation-ready web app in minutes. Invite your translator or localization expert to fine-tune wording using i18.dev project settings.
Happy Vibe Coding!
Top comments (0)