Symfony UX Twig Components apporte une approche moderne de la modularisation des templates Twig, en permettant de créer des composants réutilisables directement en PHP — sans avoir recours à React ou Vue.js.

Qu’est-ce que Symfony UX Twig Components ?

Symfony UX Twig Components est une bibliothèque du projet Symfony UX qui permet de créer des composants Twig associés à une classe PHP. Chaque composant est constitué de deux éléments : une classe PHP portant l’attribut #[AsTwigComponent] et un template Twig correspondant. Les propriétés publiques de la classe deviennent automatiquement accessibles dans le template.

Installation et configuration

Pour installer la bibliothèque :

composer require symfony/ux-twig-component

Une fois installée, un fichier de configuration apparaît dans config/packages/twig_component.yaml. Pour vérifier les composants enregistrés :

php bin/console debug:twig-component

Créer son premier composant

Pour créer un composant NotificationBanner :

  1. Créer un dossier templates/components/
  2. Y ajouter un fichier notification_banner.html.twig
  3. Créer une classe PHP avec l’attribut #[AsTwigComponent]

Les attributs du composant se définissent comme des propriétés publiques. La méthode mount() est appelée automatiquement au rendu — idéale pour injecter des services via l’injection de dépendances, comme le service Security pour vérifier l’utilisateur connecté.

Utilisation dans Twig

<twig:NotificationBanner message="Connexion réussie" type="success" />

Le rendu produit un bloc HTML avec le message et l’icône correspondant au type. La syntaxe rappelle celle des composants React ou Vue, mais entièrement côté serveur avec PHP.

Types de notification disponibles

  • success (par défaut) — confirmation d’action
  • info — message informatif
  • danger — avertissement ou erreur

Pour aller plus loin

Symfony UX Twig Components s’intègre parfaitement avec Symfony UX Turbo pour créer des interfaces dynamiques sans JavaScript complexe. Retrouvez la démonstration complète sur YouTube avec PhpStorm.