Download the PHP package verbant/wn-livewire-plugin without Composer

Livewire for WinterCMS

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

Installation

You can install the package via composer:

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

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

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 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 directive. The Livewire-markup is rendered by the {% component %} directive and renders the markup as defined as the ViewName during registration.

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

Installation

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

Examples

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:

On the code tab, enter:

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:

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

Plugin component example

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

In the components directory create a file Lw.php:

The LivewireComponent trait adds a onRender() function which takes care of rendering the markup as Liveewire markup.

In the components/lw directory create 2 files: default.twig with contents:

And Lw.php with contents:

You can now add this component to a CMS page by dragging it from the side bar. Note that you can pass variables to the component, which will be made available to the Livewire component, like

Backend example

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

In the controllers directory create a file Lwc.php:

The LivewireController trait provides the renderLivewire function.

In the controllers/lwc directory create 2 files: lwc.twig with contents:

And Lwc.php with contents:

You can now add this component to a backend view by calling

Note that for the backend you do not need to add the { livewireStyles() }} and {{ livewireScripts() }} directives.

License

The MIT License (MIT). Please see License File for more information.