Docs / Svelte and SvelteKit

Svelte et SvelteKit i18n, automatisé

Localisez les applications Svelte et SvelteKit avec svelte-i18n : le balisage devient des appels $_(), les pluriels deviennent des messages ICU, et les pages SvelteKit s'affichent dans la langue du visiteur sur le serveur.

Comment ça marche

Le balisage devient {$_('key')}, les attributs comme title="Hello {name}" deviennent un seul message, et les toasts dans <script> sont également traduits. Les constantes affichées par le balisage ({title}, {#each tabs as tab}{tab.label}) deviennent des clés lues via $_().

Une phrase autour d'un lien ou d'un texte en gras reste un seul message : un <I18nT> généré le rend, chaque élément étant passé en tant que fragment (Svelte 5) ou sélectionné dans son slot (Svelte 3 et 4), afin que les traducteurs puissent déplacer le lien pour s'adapter à la grammaire.

Dans SvelteKit, un hooks.server généré sélectionne la langue à partir d'un cookie ou de Accept-Language, afin que les pages s'affichent dans la bonne langue sans scintillement.

Avant et après

La sortie réelle du moteur pour ce fichier. Lors d'une exécution réelle, le modèle hébergé nomme les clés à partir du contexte.

src/routes/cart/+page.svelte · avant

<script>
  export let data;
</script>

<h1>Your cart</h1>
<p>You have {data.count} items ready to ship.</p>
<p>Read our <a href="/returns">returns policy</a> before you order.</p>
<img src="/box.png" alt="Box for {data.name}" />

src/routes/cart/+page.svelte · après

<script>
  import { _ } from 'svelte-i18n';
  import I18nT from '$lib/I18nT.svelte';
  export let data;
</script>

<h1>{$_('page.your_cart')}</h1>
<p>{$_('page.you_have_items_ready_to', { values: { count: data.count } })}</p>
<p><I18nT key="page.read_our_before_you_order">{#snippet a()}<a href="/returns">{$_('page.returns_policy')}</a>{/snippet}</I18nT></p>
<img src="/box.png" alt={$_('page.box_for', { values: { name: data.name } })} />

locales/en.json

{
  "page": {
    "your_cart": "Your cart",
    "you_have_items_ready_to": "You have {count} items ready to ship.",
    "returns_policy": "returns policy",
    "read_our_before_you_order": "Read our {a} before you order.",
    "box_for": "Box for {name}"
  }
}

Ce que l'installation ajoute

La première exécution configure svelte-i18n si le projet ne l'a pas encore :

svelte-i18n
src/lib/i18n (ou src/i18n), importé depuis +layout ou main
hooks.server pour SvelteKit

Exécutez-le

L'interface CLI nécessite Node.js 22 ou une version ultérieure.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Ou ajoutez le Action GitHub et recevez une pull request à chaque push. Essayez-le d'abord sur votre propre code dans le playground.