Reactive Twig Templates
Your frontend Swiss Army Knife: build a highly-interactive UI from the comfort of Twig. No JS needed.
src/Twig/SearchPackagesComponent.php
use App\Service\PackageRepository;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\DefaultActionTrait;
#[AsLiveComponent('search_packages')]
class SearchPackagesComponent
{
use DefaultActionTrait;
#[LiveProp(writable: true)]
public ?string $query = null;
public function __construct(private PackageRepository $packageRepo)
{
}
public function getPackages(): array
{
return $this->packageRepo->findAll($this->query);
}
}
templates/components/search_packages.html.twig
<div{{ attributes }}>
<input
type="text"
data-model="query"
>
{% if this.packages|length > 0 %}
<div data-loading="addClass(opacity-50)">
{% for package in this.packages %}
<div>
<h4>{{ package.humanName }}</h4>
</div>
{% endfor %}
</div>
{% else %}
<div>Ah! No packages found matching "{{ query }}"</div>
{% endif %}
</div>
Live Components
$ composer require ux symfony/ux-live-component
$ npm install --force
$ npm run watch