3 years ago

Category: Laravel, Laravel, PHP, PHP, nodejs, nodejs, javascript, javascript

It’s as if your front-end HTML can call your PHP code and everything just works.

Let me show you what’s going on: For this writeup, we’re going to use the example of a simple counter component.

In this simple case, the @livewire('counter') directive compiles down to code that looks like this: echo \Livewire\Livewire::mount('counter')->html(); Before we dig into what’s happening in mount() we’ll just stay outside and look at the result of that call: As you can see, Livewire renders the component as you’d expect, but it also pumps the HTML with lots of metadata for its own internal purposes.

The final stage of initialization is for Livewire to walk through all the DOM nodes in a component and look for any Livewire attributes.

Before we move onto that, a quick review of where we are: We have HTML on the page that looks like this: And in memory, JavaScript has an instance of the Component class with all the data we need about this Livewire component.