The enflow/livewire-twig package provides the option to load Livewire components in your Twig templates.
You can install the package via composer:
composer require enflow/livewire-twigThe Twig extension will automatically register when rcrowe/twigbridge is used.
If you're using another configuration, you may wish to register the extension manually by loading the extension Enflow\LivewireTwig\LivewireExtension.
This package only provides a wrapper for the @livewireScripts, @livewireStyles & @livewire calls. Everything else under the hood is powered by livewire/livewire.
You can register your Livewire components like normal.
Add the following tags in the head tag, and before the end body tag in your template.
<html>
<head>
...
{{ livewireStyles() }}
</head>
<body>
...
{{ livewireScripts() }}
</body>
</html>In your body you may include the component like:
{# The Twig version of '@livewire' #}
{% livewire counter %}
{# If you wish to pass along variables to your component #}
{% livewire counter with {'count': 3} %}Add the following to resources/views/livewire/counter.twig
<div>
<div wire:click="add">+</div>
<div>{{ count }}</div>
<div wire:click="subtract">-</div>
</div>Add the following to app/Http/Livewire/Counter.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public int $count = 1;
public function add()
{
$this->count++;
}
public function subtract()
{
$this->count--;
}
}- Components with hyphens cannot be called like
{% livewire foo-bar %}as Twig doesn't allow hyphens like that. We've added a workaround for this by allowing camel case:{% livewire fooBar %}
- Implement support for
keytracking - Implement support for preserving child tracking
- Moar tests.
$ composer testPlease see CONTRIBUTING for details.
If you discover any security related issues, please email michel@enflow.nl instead of using the issue tracker.
Enflow is a digital creative agency based in Alphen aan den Rijn, Netherlands. We specialize in developing web applications, mobile applications and websites. You can find more info on our website.
The MIT License (MIT). Please see License File for more information.