Ux Twig Component Laravel Package

Getting Started

This package is Symfony-only and has no practical use in Laravel. However, for context in evaluating cross-framework feasibility: install via composer require symfony/ux-twig-component, enable the bundle in config/bundles.php, define components as Twig templates in templates/components/, and render them with <twig:ComponentName prop="value">. First use: create a minimal templates/components/Card.html.twig with a prop and slot, then render <twig:Card title="Hello">Content</twig:Card> in a parent template.

Implementation Patterns

Components are PHP-backed classes (optional but recommended) paired with Twig templates. Use typed props (e.g., #[TwigComponent\PreventEscaping] public string $title) for type safety and auto-completion. Leverage slots for composition (<slot>Default</slot> / <twig:MyComponent><span>Fallback</span></twig:MyComponent>), lazy hydration via JS (hydrate()), and integration with Turbo/Alpine. For complex state, combine with Symfony’s Form component, but avoid global state—always pass data explicitly.

Gotchas and Tips

Component templates are not auto-registered in debug:twig, so use dump() sparingly and inspect via Symfony Profiler. Be cautious with dynamic IDs in forms (form.vars.id + index suffixing prevents duplicates). Server-generated randomness (e.g., uniqid()) breaks hydration—use data-twig-component-skip-hydration only when necessary. Props are strongly isolated (no scope leakage), but avoid injecting services directly—pass them as props. Note: this package is Symfony-native; attempting to adapt it to Laravel would require reverse-engineering Symfony’s container and Twig bridge—high technical debt, zero official support, and guaranteed maintenance burden. For Laravel, stick to Blade components or Livewire.