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.

enflow / livewire-twig