Kuidas lisada Vite’i abil loodud Lovable’i rakendusele i18n?

Klassikalisel Vite’i tehnoloogiapinul loodud Lovable’i rakenduse lokaliseerimiseks on parim lahendus eraldada hardcoded strings commit’itud Lingui PO-kataloogidesse, mitte lisada käitusaegset tõlkevidinat. Teie Lovable’i rakendus on kliendipoolselt renderdatav Reacti SPA, seega pole serveripoolset renderdust, mille külge haakuda, ning püsiv lahendus on hoida tõlkefailid oma hoidlas ja saata need koos build’iga. globalize.now on tehisintellektil põhinev lokaliseerimisinfrastruktuur, mis teeb eraldamise ja hoiab kataloogid iga Git push’i järel sünkroonis, nii et seadistate selle ühe korra ega pea enam lokaalifaile käsitsi haldama.

---

Millisel tehnoloogiapinul teie Lovable’i rakendus töötab – klassikalisel Vite’il või TanStack Startil?

Vaadake kõigepealt failipuud, sest Lovable kasutab kahte eri tehnoloogiapinu ja kumbki vajab erinevat i18n-seadistust. Kui näete src/pages/Index.tsx, src/main.tsx ja vite.config.ts, kasutate klassikalist Vite’i ja Reacti SPA-pinu, mis on Lovable’i vaikeseadistus. TanStack Starti projektides on seevastu src/routes/, src/router.tsx, src/routeTree.gen.ts ja src/server.ts.

Tehnoloogiapinu valitakse projekti loomisel ja seda ei saa hiljem vahetada, seega on see otsus teie eest juba tehtud. Klassikaline Vite’i pinu renderdab täielikult brauseris ega tee vaikimisi serveripoolset andmete laadimist. See juhend käsitleb klassikalist Vite’i SPA-d. Kui teie failid vastavad TanStack Starti paigutusele, järgige selle asemel meie TanStack Starti i18n-juhendit Lovable’i jaoks, sest serveripoolne renderdus muudab tõlgete laadimise viisi.

---

Miks jäävad Vite’i SPA-l põhinevad Lovable’i rakendused i18n-tööriistade tähelepanuta?

Sest tööriistade tähelepanu liikus Lovable’i uuemale TanStack Starti ja SSR-i vaikeseadistusele ning klassikaline Vite’i SPA jäi kehvemini teenindatuks, kuigi see on endiselt Lovable’i kõige levinum tehnoloogiapinu. Viimastel kuudel suunasid kõik Lovable’ile mõeldud lokaliseerimistööriistad, sealhulgas Lovalingo, Intlayer ja Paraglide, oma juhendid ümber TanStack Startile koos serveripoolse renderdusega.

Nii tekkis tühimik. Kliendipoolselt renderdataval SPA-l on piirangud, mida SSR-juhendid ei käsitle: tõlgitud märgistiku sisestamiseks pole serveripoolset renderdust, kogu bundle laaditakse brauseris ning hiljem laaditav skript võib ingliskeelse kasutajaliidese üle kirjutada. Hea uudis on see, et klassikalisel tehnoloogiapinul on puhas ja hästi toetatud lahendus, millest enamik ehitajaid ei kuule, sest kõige häälekamad tööriistad tegelevad teise pinuga.

---

Mis vahe on repoosse commit’itud kataloogidel ja käitusaegsel tõlkevidinal?

Repoosse commit’itud kataloogid on tõlkefailid, mis on teie hoidlasse sisse registreeritud ja build’i ajal bundle’isse kaasatud. Käitusaegne vidin on aga kolmanda osapoole skript, mis vahetab teksti brauseris pärast seda, kui ingliskeelne kasutajaliides on juba laaditud. See erinevus määrab Vite’i SPA puhul kolm olulist asja.

Esiteks vilkumine ja paigutuse nihkumine: vidin kuvab ingliskeelse teksti ja kirjutab selle siis ümber, nii et kasutaja näeb nähtavat vahetust ning paigutus võib hüpata. Commit’itud kataloogid renderdavad õige keele juba esimesel kuvamisel. Teiseks indekseeritavus: build’iga kaasa tulevad stringid on osa teie lähtekoodist, vidina tekst sisestatakse hiljem ja seda on roomajatel raskem lugeda. Kolmandaks omandiõigus: commit’itud kataloogid on teie failid teie hoidlas, seega ei pea miski väline võrgus olema, et teie rakendus saaks edasi saksa või jaapani keeles rääkida.

---

Kuidas lisada Lingui abil Lovable’i Vite’i rakendusele i18n?

Lisage Lingui oma i18n-kihiks, ümbritsege stringid vastavate makrodega ja laske selle Vite’i pluginil kataloogid kompileerida. Lingui on kerge i18n-raamistik, millel on spetsiaalne Vite’i plugin ja PO-põhine kataloogivorming – täpselt see, mida kliendipoolselt renderdatav SPA vajab.

Esmalt paigaldage paketid. Lingui jagab oma CLI, Vite’i plugina ja Reacti käituskeskkonna eraldi osadeks:

npm install --save-dev @lingui/cli @lingui/vite-plugin @rolldown/plugin-babel
npm install @lingui/core @lingui/react

Seejärel registreerige plugin failis vite.config.ts ja lisage lingui.config.ts, mis viitab teie lähtekoodi- ja lokaadikaustale:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { lingui } from "@lingui/vite-plugin";

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

// lingui.config.ts
import { defineConfig } from "@lingui/cli";

export default defineConfig({
  locales: ["en", "de", "fr"],
  sourceLocale: "en",
  catalogs: [
    {
      path: "src/locales/{locale}/messages",
      include: ["src"],
    },
  ],
});

Seejärel ümbritsege hardcoded JSX-tekst Trans makroga, selle asemel et jätta stringid otse koodi:

// before
<h1>Create your account</h1>

// after
import { Trans } from "@lingui/react/macro";
<h1><Trans>Create your account</Trans></h1>

Nüüd eraldage stringid. CLI skannib teie src-kausta ja kirjutab iga lokaadi jaoks PO-kataloogi, näiteks src/locales/en/messages.po:

npx lingui extract

Täitke iga keele jaoks msgstr väljad või andke see samm automatiseeritud kihile (vt järgmist jaotist). Eraldi kompileerimiskäsku pole vaja käivitada, sest @lingui/vite-plugin kompileerib PO-kataloogid arenduse ja build’i ajal jooksvalt.

Lõpuks lisage keelevalija, aktiveerides käitusajal lokaadi:

import { i18n } from "@lingui/core";
i18n.activate("de");

See ongi klassikalise Vite’i pinu kogu töövoog: paigalda, ümbritse, eralda, tõlgi, vaheta. Kõik peale tõlgete endi asub teie hoidlas.

---

Kuidas globalize.now seda iga push’i järel automatiseerib?

globalize.now eemaldab käsitsi tehtavad eraldamise ja täitmise sammud, jälgides teie hoidlat ja tehes need iga Git push’i järel teie eest ära. See leiab teie Lovable’i koodibaasist uued hardcoded strings, genereerib Lingui oodatavad võtmed ja PO-kirjed, loob tõlked ning commit’ib uuendatud kataloogid tagasi, nii et teie src/locales-kaust on alati ajakohane ja te ei pea käske käivitama.

Ühendage hoidla üks kord saidiga globalize.now ja jälgimine algab. Kui soovite seadistada selle otse redaktorist, paigaldage oskused:

npx skills add globalize-now/globalize-skills

Lovable’is lisage oma tööruumi lovable-i18n oskus ja paluge Lovable’il i18n seadistada. Käituskeskkonnaks jääb Lingui, seega ei muutu rakenduse renderdamises midagi. Muutub see, et te ei pea enam lokaalifaile pidevalt jälgima. See on sama „seadista üks kord, sünkrooni iga push’i järel” mudel, millele meie vibe-kodeerijate töövoog ja arendaja seadistus on üles ehitatud.

Üksikule ehitajale on hinnastus lihtne: 20 € kuus tööruumi kohta, ilma istmekoha- ja keelepõhiste tasudeta, millele lisandub tegelikult kasutatud tõlgete maksumus. Uued tööruumid saavad registreerumisel 5 € krediiti ja kaarti pole vaja – sellest piisab väikese rakenduse täielikuks tõlkimiseks.

---

Kas peaksite selle asemel kasutama käitusaegset vidinat? Lovalingo õppetund

Mitte siis, kui soovite, et teie tõlked kestaksid kauem kui üks tarnija. Käitusaegne tõlkevidin on alguses mugav, kuid muudab teie rakenduse sõltuvaks kellegi teise serveri töös püsimisest ning sellel sõltuvusel on reaalne rikkestsenaarium.

Lovable’i ehitajate seas populaarne käitusaegne vidin Lovalingo teatas, et lõpetab tegevuse 31. augustil 2026. Uusi registreerumisi enam vastu ei võeta ja nimetatud järglast pole. Nende enda migratsioonijuhend soovitab kasutajatel üle minna projektipõhisele rahvusvahelistumisele – täpselt sellele commit’itud kataloogide lähenemisele, mida see juhend tutvustab. Kui vidina tarnija tegevuse lõpetab, kaovad sisestatud tõlked ja kasutajaliides langeb tagasi inglise keelele. Teie hoidlas olevad failid seda ei tee. Kui kasutate juba vidinat, juhendab meie Lovalingo sulgemise migratsioonijuhend teid üleminekul ning laiem tõlked lähevad iga push’i järel katki probleem selgitab, miks commit’itud kataloogid võidavad AI abil loodud rakenduste puhul.