Reactive Twig Templates
Your frontend Swiss Army Knife: build a highly-interactive UI from the comfort of Twig. No JS needed.
// ... use statements hidden - click to show
#[AsLiveComponent()]
class SearchPackages
{
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);
}
}
<div{{ attributes }}>
<input
type="text"
data-model="query"
placeholder="Results update as you type..."
class="form-control"
>
{% if computed.packages|length > 0 %}
<div data-loading="addClass(opacity-50)" class="mt-3 row">
{% for package in computed.packages %}
{{ include('main/_package_in_list.html.twig') }}
{% endfor %}
</div>
{% else %}
<div class="pt-3">Ah! No packages found matching "{{ query }}"</div>
{% endif %}
</div>
Live Components
$ composer require symfony/ux-live-component
$ npm install --force
$ npm run watch