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 stack-aware i18n: TanStack Start setup for new Lovable apps, a standard provider setup for legacy React/Vite apps, automatic translations, locale routing, hreflang, translated metadata, and dashboard overrides.

• Supports new Lovable TanStack Start apps
• Supports legacy Lovable React/Vite apps
• 10+ supported languages
• SEO-friendly path routing (/fr/, /de/, /es/)
• Automatic hreflang, canonical, html[lang], and translated metadata
• 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:
- configure Lovalingo's TanStack Start setup
- 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 TanStack-aware install prompt

   Copy the prompt above and paste it into the Lovable chat. Lovable will install the package and apply the correct setup path for the detected stack.

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