PHPackages                             enflow/livewire-twig - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. enflow/livewire-twig

ActiveLibrary[Templating & Views](/categories/templating)

enflow/livewire-twig
====================

Enabling Livewire in Twig templates

4.6.0(2mo ago)2868.8k↓38.9%3[1 PRs](https://github.com/enflow/livewire-twig/pulls)1MITPHPPHP ^8.4CI passing

Since Oct 13Pushed 2w ago3 watchersCompare

[ Source](https://github.com/enflow/livewire-twig)[ Packagist](https://packagist.org/packages/enflow/livewire-twig)[ Fund](https://enflow.nl/contact)[ RSS](/packages/enflow-livewire-twig/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (10)Dependencies (14)Versions (25)Used By (1)

Livewire for Twig
=================

[](#livewire-for-twig)

[![Latest Version on Packagist](https://camo.githubusercontent.com/4161a37bb157733f8e11080c03a47c24bf0c35e8463da373063a098c988eea6d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f656e666c6f772f6c697665776972652d747769672e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/enflow/livewire-twig)[![GitHub Workflow Status](https://github.com/enflow/livewire-twig/workflows/run-tests/badge.svg)](https://github.com/enflow/livewire-twig/workflows/run-tests/badge.svg)[![Total Downloads](https://camo.githubusercontent.com/c09455c9f4fa2409c713c72919f54b48b4b3841d5e5a8c2548efac86b8e1a6a2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f656e666c6f772f6c697665776972652d747769672e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/enflow/livewire-twig)

The `enflow/livewire-twig` package provides the option to load Livewire components in your Twig templates.

Versions
--------

[](#versions)

### <= 3.x.x

[](#-3xx)

Version 3.x.x supports Livewire 2.

### >= 4.x.x

[](#-4xx)

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
------------

[](#installation)

You can install the package via composer:

```
composer require enflow/livewire-twig
```

Usage
-----

[](#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.

```

    ...
    {{ livewireStyles() }}

    ...
    {{ livewireScripts() }}

```

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() #}
{% livewire.component 'counter' key('counterkey') %}

{# The Twig version of '@persist' #}
{% livewire.persist 'name' %}

    ...

{% 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() }}
```

### Example

[](#example)

Add the following to `resources/views/livewire/counter.twig`

```

    +
    {{ count }}
    -

```

Add the following to `app/Http/Livewire/Counter.php`

```