PHPackages                             verbant/wn-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. [Framework](/categories/framework)
4. /
5. verbant/wn-livewire-plugin

ActiveWinter-plugin[Framework](/categories/framework)

verbant/wn-livewire-plugin
==========================

Plugin to use Livewire in Winter CMS

v0.9.0-beta(2y ago)214MITPHPPHP >=8.2

Since Jul 17Pushed 2y ago1 watchersCompare

[ Source](https://github.com/wverhoogt/wn-livewire-plugin)[ Packagist](https://packagist.org/packages/verbant/wn-livewire-plugin)[ RSS](/packages/verbant-wn-livewire-plugin/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

Livewire for WinterCMS
======================

[](#livewire-for-wintercms)

The `verbant/wn-livewire-plugin` package provides the option to load Livewire components in WinterCMS projects.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require verbant/wn-livewire-plugin
```

Usage
-----

[](#usage)

This package supports Livewire components in a theme, in plugins or in the backend. Each of these usages requires a specific approach:

### Theme usage

[](#theme-usage)

The plugin creates a menu entry in the top menubar, ¨Livewire¨ and a ¨Conponents¨ side menu entry. You can add a new component or modify an existing one. The Markup tab contains the Livewire-markup, the code tab contains the Livewire PHP-class containing the callback functions.

### Plugin component usage

[](#plugin-component-usage)

#### Component registration

[](#component-registration)

Component and backend Livewire components require registration, so that Livewire can find the markup and its backing class. You register these components by creating a public function registerLivewireComponents() returning information for the components as an array. Each element of this array has the following layout:

```
    'component name' => ['LivewireClass' => Class of Livewire, 'ViewName' => 'name of view in components|controllers/component name', 'ViewPath' => "full path to this view"];
```

#### Component usage

[](#component-usage)

A plugin can define a component which has both Livewire-markup and a Livewire PHP-class. You can still have other component partials, and render these in the usual way using the `twig {% partial %} ` twig directive. The Livewire-markup is rendered by the {% component %} directive and renders the markup as defined as the ViewName during registration.

### Plugin backend usage

[](#plugin-backend-usage)

A plugin can have a backend controller which supports Livewire components. The markup will probably in the controllers/controller name directory. The Livewire PHP-class could be there as well. To render the Livewire-component, call

```
$this->renderLivewire("name", [optional arguments]); somewhere in a PHP markup-file.
```

Installation
------------

[](#installation-1)

Add the following tags in the `head` tag, and before the end `body` tag in your page or layout.

```

    ...
    {{ livewireStyles() }}

    ...
    {{ livewireScripts() }}

```

Examples
--------

[](#examples)

### Theme example

[](#theme-example)

Create a Livewire component by choosing ¨Livewire¨ from the top bar en then ¨Add +¨ from the sidebar. Name it counter. On the markup tab, enter:

```

        Add

      {{ count }}

        Subtract

```

On the code tab, enter:

```
public $count = 1;

public function add()
{
  $this->count++;
}

public function subtract()
{
  $this->count--;
}
```

Note that the code editor flags an error on the top line. It doesn´t know that this code will be embedded in a class.

Create a page and on the markup tab enter:

```
Example
{% livewire "counter" with {'count': 2 } %}
```

And add the {{ livewireStyles() }} and {{ livewireScripts() }} on this page or on a layout, used by it.

### Plugin component example

[](#plugin-component-example)

Create a plugin and a component named ¨lw¨ within that plugin. In the Plugin.php file include:

```