PHPackages                             rainlab/livewire-plugin - 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. rainlab/livewire-plugin

ActiveOctober-plugin[Templating & Views](/categories/templating)

rainlab/livewire-plugin
=======================

Load and render Livewire components using Twig inside October CMS themes.

v1.3.2(2mo ago)28515↓81.8%4[1 issues](https://github.com/rainlab/livewire-plugin/issues)PHP

Since Mar 29Pushed 2mo ago7 watchersCompare

[ Source](https://github.com/rainlab/livewire-plugin)[ Packagist](https://packagist.org/packages/rainlab/livewire-plugin)[ RSS](/packages/rainlab-livewire-plugin/feed)WikiDiscussions main Synced 3w ago

READMEChangelogDependencies (4)Versions (12)Used By (0)

Livewire Plugin
===============

[](#livewire-plugin)

Integrate Laravel Livewire components inside October CMS themes, app and plugins, with templates provided by Twig, Blade or PHP.

Requirements
------------

[](#requirements)

- October CMS v3.3.9 or above

### Installation

[](#installation)

To install with Composer, run this from your project root.

```
composer require rainlab/livewire-plugin
```

Rendering Livewire Components
-----------------------------

[](#rendering-livewire-components)

Use the `livewire` CMS component to activate Livewire in your CMS theme page or layout. For example, your page may look like this.

```
url = "/test"
layout = "default"

[livewire]
==

    {% livewire 'counter' %}

```

Next, render a Livewire component using the `{% livewire %}` Twig tag.

```
{% livewire 'counter' %}
```

You may pass variables to the component using an equal sign (`=`).

```
{% livewire 'counter' count=3 %}
```

> **Note**: For proper operation, your CMS layout should include the `{% styles %}` and `{% scripts %}` placeholder tags, as described in the [placeholder documentation](https://docs.octobercms.com/3.x/markup/tag/placeholder.html#scripts).

File Locations
--------------

[](#file-locations)

By default, classes are stored in the **app/Livewire** directory. However, you can register custom classes within plugins (see below).

Views are stored in the in **app/views/livewire** directory by default. The following template syntaxes are supported in the views directory, determined by their file extension.

ExtensionTemplate Engine**.htm**October Twig**.blade.php**Laravel Blade**.php**PHP TemplatePlugin Registration
-------------------

[](#plugin-registration)

To register Livewire components in your plugins using the `registerLivewireComponents` override method. The method should return a class name as the key and the component alias as the value.

```
public function registerLivewireComponents()
{
    return [
        \October\Demo\Livewire\Todo::class => 'demoTodo'
    ];
}
```

In the above example, the `October\Demo\Livewire\Todo` class refers to the following file locations:

- Class file: **plugins/october/demo/livewire/Todo.php**
- View file: **plugins/october/demo/views/livewire/todo.htm**.

The class should return its view path by overriding the `render` method, and returns [a View instance](https://docs.octobercms.com/3.x/extend/services/response-view.html) relative to the plugin.

```
namespace October\Demo\Livewire;

use RainLab\Livewire\Classes\LivewireBase;

class Todo extends LivewireBase
{
    public function render()
    {
        return \View::make('october.demo::livewire.todo');
    }
}
```

The component can be rendered anywhere using the `demoTodo` alias.

```
{% livewire 'demoTodo' %}
```

### Usage in CMS Components

[](#usage-in-cms-components)

You may implement Livewire in your [CMS components](https://docs.octobercms.com/3.x/extend/cms-components.html) using the `RainLab\Livewire\Behaviors\LivewireComponent` behavior. This implementation will ensure that the necessary dependencies are registered when the component is used.

```
class MyComponent extends \Cms\Classes\ComponentBase
{
    public $implement = [
        \RainLab\Livewire\Behaviors\LivewireComponent::class
    ];
}
```

Then render the component using the `{% livewire %}` tag.

```
{% livewire 'counter' %}
```

Alternatively, you can render the component in PHP using the `renderLivewire` method.

```
$this->renderLivewire('counter');
```

### Usage in Backend Controllers

[](#usage-in-backend-controllers)

You may implement Livewire in your [backend controllers](https://docs.octobercms.com/3.x/extend/system/controllers.html) using the `RainLab\Livewire\Behaviors\LivewireController` behavior. This implementation will ensure that the necessary dependencies are registered with the controller.

```
class MyController extends \Backend\Classes\Controller
{
    public $implement = [
        \RainLab\Livewire\Behaviors\LivewireController::class
    ];
}
```

Then render the component using the `makeLivewire` method.

```