Lovalingo + Lovable

Why use Lovalingo for Lovable translation?

Lovable gives you the app and SSR foundation, but it does not replace a full localization layer. Lovalingo adds managed browser translation, language switching, and dashboard overrides. TanStack Start remains responsible for crawlable locale routes, raw translated output, metadata, hreflang, and sitemap entries.

• Supports new Lovable TanStack Start apps
• Supports legacy Lovable React/Vite apps
• 10+ supported languages
• SEO-friendly path routing (/fr/, /de/, /es/)
• Locale, canonical, hreflang, and metadata support with raw-output verification
• Zero translation file maintenance

How do you install Lovalingo in Lovable?

Copy and paste this prompt into Lovable to add Lovalingo automatically:

Install Lovalingo and add translation to this Lovable app.

1. Run: npm install @lovalingo/lovalingo
2. Detect whether this Lovable project uses TanStack Start or legacy React/Vite.

For TanStack Start:
- preserve TanStack Start routing and server rendering
- mount the Lovalingo runtime from @lovalingo/lovalingo/core in client code
- make /en, /es, /fr, /nl and /:locale/* routes return HTTP 200
- server-render html[lang], canonical, hreflang, title, meta description, OG, and Twitter tags
- add the Lovalingo language switcher using TanStack navigation
- keep /.well-known/lovalingo.json, /robots.txt, and /sitemap.xml unprefixed

For legacy React/Vite:
- wrap the root app with LovalingoProvider
- set routing="path"
- add the LanguageSwitcher component

import { LovalingoProvider } from '@lovalingo/lovalingo/core';

export default function App() {
  return (
    <LovalingoProvider
      publicAnonKey="YOUR_PUBLIC_ANON_KEY"
      defaultLocale="en"
      locales={["fr", "de", "es", "it"]}
      routing="path"
    >
      {/* your existing app */}
    </LovalingoProvider>
  );
}

3. Verify /es returns 200, the switcher appears, and hreflang metadata is present in the initial HTML.

How do you set up Lovalingo with Lovable?

1. 1

   Open your Lovable project

   Go to lovable.dev and open the project you want to translate. New Lovable projects use TanStack Start; older projects may use React/Vite.

2. 2

   Paste the host-aware install prompt

   Copy the prompt above into Lovable chat. Review the generated changes and verify that TanStack Start still owns locale routes and raw SEO while Lovalingo owns browser translation.

3. 3

   Get your Lovalingo public anon key

   Create a free account at lovalingo.com, create a project, and copy your public anon key.

4. 4

   Add the public anon key to your Lovable project

   In Lovable, add the Lovalingo public anon key where the app reads public runtime config. Public anon keys are safe to expose in frontend code.

5. 5

   Test locale URLs and deploy

   Open /es, /fr, and /nl, confirm they return 200, click the switcher, inspect html[lang] and hreflang, then deploy your Lovable project as usual.

FAQ

Also works with