Download the PHP package verbant/wn-livewire-plugin without Composer
On this page you can find all versions of the php package verbant/wn-livewire-plugin. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package wn-livewire-plugin
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.