03 - How Livewire Works: Explained

Text Version of the Lesson

To work with Livewire, you must understand what is happening under the hood.

In the previous lesson, I added HTML and Tailwind header/footer code. Let me show you that it is NOT reloaded when we click "Submit".

If we open the browser Network tab, we see the POST request to the /livewire/update URL.

And if we take a look at what it returns, the main thing to understand is the "html" part.

If we zoom a bit further to the right, we see this:

So, Livewire request to the server returns the HTML of the component to re-render in the browser.

Remember the structure of our main Blade file?

resources/views/companies/create.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Form</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-100">
    <livewire:company-create />
</body>
</html>

So yeah, Livewire doesn't return the full HTML of that page. It returns the HTML of only the part inside <livewire:company-create /> to re-render only the component of the form.

resources/views/livewire/company-create.blade.php

<div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
    <!-- Success Alert -->
    @if ($savedName != '')
        ...
    @endif
 
    <!-- Form -->
    <form wire:submit="save">
        ...
    </form>
</div>

So, Livewire calls the render() method of the component class and...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (36 h 00 min)

You also get:

61 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here