Laravel Livewire is a technology similar to Phoenix Liveview, it renders the page normally and then uses AJAX for dynamic updates, sometimes called html-over-the-wire.
In addition to the simplicity of October’s AJAX framework and CMS components, we’re often asked how to integrate Livewire within October CMS.
We’ve created a simple plugin that should make it easy to use Livewire Components in your themes. Here is the GitHub repo that includes a README to get started.
If you love Laravel, Livewire and October CMS, please give it a try and let us know if you found this plugin useful.
I’ve followed the sample instructions on GitHub but I receive the following error message:
An exception has been thrown during the rendering of a template ("Unable to find component: [counter]").
I have created an app/livewire/Counter.php file with content:
<?php namespace App\Livewire;
use Livewire\Component;
class Counter extends Component
{
public $count = 1;
public function add()
{
$this->count++;
}
public function subtract()
{
$this->count--;
}
}
Also I have created a app/views/livewire/counter.htm file:
Wow, @daft, this is VERY good news!
Do you know if we can also use with the plugin the livewire events? like wire:click=“$emit(‘postAdded’)” to have two components communicate to each other and respond to those events?
@vimre@daft I had the same error than @vimre
So here goes the first testing! I noticed that the component isn’t found unless the app/Livewire folder is written with a capital L, instead of lowercase as it is written in the readme file.
But, even though the component is now found, I have a 404 error on the livewire script js (so it doesn’t work). My october installation is inside a subfolder, and even if I set the link policy to force, its trying to get the file without taking into account the whole path with the subfolder in it.
Indeed the script with added like this (without the whole path):
Also check out Inertia, it does pretty much the same thing, but it uses a Vue/React front-end, so it has better performance and less security problems (take a look at Security | Laravel Livewire).
Hi. Thanks @em-pathy for the reference. But even though they might do similar things, they are used in completely different scenarios. Livewire can seamlessly integrate into OC, while with inertia you have to have a completely different frontend I think.
It looks like this plugin is pretty popular, so we’ve added some more features to it in the next release. The next version (v1.1) will require the latest version of October CMS to function (v3.3.9) since it relies on some new core features.
Here’s how to use Livewire in your Backend Controllers:
Usage in Backend Controllers
You may implement Livewire in your backend controllers 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.
<?= $this->makeLivewire('counter') ?>
There is also some advice on registering components inside plugins and using them inside CMS components. Take a look at the updated readme, it will be released in the next patch.
@daft Is it possible to access kind of a global state?
I see two scenarios:
How to access info that comes from a CMS component, for example I have a “Shop” CMS component, but from inside a livewire view, I can’t access its data. I can access it from any cms page, but not from the livewire component view. (I’m using the registered livewire components in a plugin)
Do all livewire components registered in a plugin havo to declare a render view? I mean, can’t a lw comp. act as a CMS component without a default file? This would be great to declare some info (kind of a global state)
In fact, registering the livewire component in my plugin, I can’t figure out how the view gets the data from the component file. Even though I initialize them as properties, the view doesn’t render them.
<?php
namespace Vox\Commerce\Livewire;
class Carticon extends \Livewire\Component
{
public $shop = 1;
public function render(){
return \View::make('vox.commerce::livewire.carticon');
}
}
and the view file (does not render {{shop}}:
<div class="cart">
Content: {{ shop }}
</div>
In the first readme examples (where the lw component was not registered in a plugin) you didn’t have to pass anything. If somehow the data must be passed to the view it gets more complicated
Yes, You can pass variables to the Livewire component from the CMS component. Access to all data, all the time, is not a good/safe idea.
Something to keep in mind…
An October CMS Component is a multi-controller pattern based on MVC (Model-View-Controller), it introduces API endpoints that are local to the page (AJAX handlers). All lifecycle data, and methods, are implicitly available to the component.
In other words, developers expose data in the response, and the view is rendered in PHP. The response can be anything (JSON, HTML, XML) and a view is optional.
A Livewire Component is like a PHP version of a Vue (or React/Angular) component, it has a state and that state is exposed to the browser. This means lifecycle data is not available globally by default, and you must explicitly define that data on the component.
In other words, developers expose data in the component class, and the view might be rendered in PHP or JavaScript. A view seems to be a requirement for this process.
@daft So good news that the plugin supports the new Livewire 3!! Thank you. One question, is there any plan for it to also add support for Livewire VOLT?
Volt looks really good for some scenarios. Kind of Vue single file components approach.
To be honest, I don’t use Livewire, and I prefer to stick with Vue (or even React) because of latency issues. This plugin is an integration guide for the community. All credit goes to kOld for making v3 work with this. I’m sure it would be possible to integrate Volt as well, although it seems to work exclusively with blade.
For dynamic UIs, we use hot controls with a vue base class (modules\backend\assets\js\vueapp\vue-control-base.js) and the AJAX framework to interface with the server. It’s much faster and gives better control over server I/O; better for large-scale apps since it keeps a separation of concerns. I don’t use Tailwind either, so maybe I’m an outlier in this regard!
Wow, that Vue approach for dynamic UIs really looks nice. And in fact in OC3+ we can see how nice results it can provide. I’m afraid its a bit beyond my current skill though. Is there any documentation or article / tutorial that you might know of to take a look? I’ve been searching but honestly I coudn’t find much.
