Courses

Livewire 3 for Beginners with Laravel 12 Starter Kit

How Livewire Works: Explained

You're reading a FREE PREVIEW of a PREMIUM course.
Login Or Join Premium ($129/year or $29/mo)
Summary of this lesson:
- Explaining Livewire's behind-the-scenes functionality and server interactions
- Demonstrating how components refresh without reloading the entire page
- Comparing `wire:model` and `wire:model.live` behavior for form inputs
- Exploring property reset behavior and Livewire lifecycle

Video Version of the Lesson

[Only for premium members]

Link to the repository

[Only for premium members]

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 19 video+text lessons of this course? (1 h 04 min)

You also get:

  • 80 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord