Symfony UX Translator est un composant qui permet d’utiliser les traductions i18n Symfony directement côté JavaScript, sans dupliquer les messages dans des fichiers JSON séparés. Il expose les messages YAML/XLIFF de Symfony au front-end via le système Stimulus.

Prérequis

Pour utiliser Symfony UX Translator, il faut d’abord installer et configurer :

  • Webpack Encore Bundle pour la compilation des assets JavaScript
  • Stimulus Bundle requis par les composants Symfony UX
composer require symfony/webpack-encore-bundle symfony/ux-translator
npm install

Configuration

Après l’installation, le composant enregistre automatiquement les traductions dans le build JavaScript. Les fichiers de traduction YAML restent dans translations/ — aucune duplication nécessaire.

Utilisation en JavaScript

Une fois configuré, les messages traduits sont disponibles directement depuis le JavaScript :

import { trans, SOME_MESSAGE } from './translator';

const message = trans(SOME_MESSAGE, { name: 'Tanguy' }, 'messages', 'fr');

Les messages sont typés via TypeScript, ce qui apporte de l’autocomplétion dans l’IDE et évite les erreurs de clé manquante au moment du développement.

Avantage principal

Sans Symfony UX Translator, gérer les traductions en front nécessitait soit de dupliquer les messages en JSON, soit de les injecter via Twig dans des variables JavaScript globales. Le composant centralise tout dans un seul flux et maintient la cohérence entre back-end et front-end.

Pour aller plus loin

Retrouvez la démonstration complète de Symfony UX Translator sur YouTube.