enflow/livewire-twig
Livewire for Twig
The enflow/livewire-twig package provides the option to load Livewire components in your Twig templates.
Versions
<= 3.x.x
Version 3.x.x supports Livewire 2.
>= 4.x.x
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.
Installation
You can install the package via composer:
composer require enflow/livewire-twig
Usage
The 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>) }}
Example
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--;
}
}
Todo
- Moar tests.
Testing
$ composer test
Contributing
Please see CONTRIBUTING for details.
Security
If you discover any security related issues, please email michel@enflow.nl instead of using the issue tracker.
Credits
About Enflow
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.
License
The MIT License (MIT). Please see License File for more information.
Related Packages
laravel-paypalpayment is simple package help you process direct credit card paym...
Powerful PHP database abstraction layer (DBAL) with many features for database s...