The enflow/livewire-twig package provides the option to load Livewire components in your Twig templates.
Version 3.x.x supports Livewire 2.
Version 4.xxx supports Livewire 3.
This version changes from the {% livewire.component test %} syntax to the {% livewire.component 'test' %} syntax.
The name argument for {% livewire.component %} and the other directives is now interpreted as an expression, allowing the use of variables or Twig expressions as a name. Note that for this reason a constant name now must be enclosed in quotes.
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 provides wrappers for the @livewireScripts, @livewireStyles, @livewireScriptConfig, @livewire, @entangle, @this and @persist, directives. Everything else under the hood is powered by livewire/livewire.
You can register your Livewire components like normal.
To use Livewire, 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.component 'counter' %}
{# If you wish to pass along variables to your component #}
{% livewire.component 'counter' with {'count': 3} %}
{# To include a nested component (or dashes), you need to use '' #}
{% livewire.component 'nested.component' %}
{# To use key tracking, you need to use key(<expression>) #}
{% livewire.component 'counter' key('counterkey') %}
{# The Twig version of '@persist' #}
{% livewire.persist 'name' %}
<div>
...
</div>
{% livewire.endpersist %}
{# The Twig version of '@entangle' (as of Livewire 3.01 poorly documented, need to check the source code) #}
{% livewire.entangle 'expression' %}
{# The Twig version of '@this' (Can only be used after Livewire initialization is complete) #}
{% livewire.this %}
{# The Twig version of '@livewireScriptConfig' (as of Livewire 3.01 poorly documented, need to check the source code) #}
{{ livewireScriptConfig(<options>) }}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--;
}
}- Moar tests.
$ composer testPlease see CONTRIBUTING for details.
If you discover any security related issues, please email [email protected] 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.