Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Livewire Basics

Livewire has quickly become one of the most popular package for building Laravel applications. It allows you to create dynamic components within PHP, which often results in allowing you to skip the JavaScript layer entirely.

In this series, we’ll go over the basics of Livewire and why/when you might reach for it. We’ll then build and test several practical Livewire components.

Updated Series Available

You are viewing an archived course. We instead recommend that you watch Livewire 3 From Scratch.

View Updated Series

Progress

Series Info

Episodes
14
Run Time
3h 2m
Difficulty
Intermediate
Last Updated
Sep 28, 2020
Version
Livewire 2
Play Series

Series Episodes

  1. Introduction (1)

    1. How it Works

      To get started, let's review the basics of Livewire and build the obligatory counter example. Next, we'll take a brief look at the request/response lifecycle of a Livewire component.
  2. Examples (13)

    1. Contact Form With Validation

      Let's convert a vanilla contact form to use Livewire. This will give us the opportunity to also review real-time validation. This component should give you a solid understanding of the basics of Livewire, including binding data with wire:model, calling methods on the server, and re-rendering views.

    2. Contact Form Testing

      Testing Livewire components is a breeze. Let's have a look at testing our contact form and all of its features.

    3. Search Dropdown

      Next up, let's use the iTunes API to build a search dropdown that allows us to search for songs and artists. As part of this example, we'll also review how to test it.

    4. Pagination

      Pagination in Livewire is quite similar to pagination within a vanilla Laravel. Let's review everything you need to know in this episode.

    5. Datatables

      Let's build a datatables component that allows a person to search, filter, sort and manipulate the query string. This component will demonstrate the power of Livewire, as building a datatables component the traditional way would require a significant amount of JavaScript.

    6. Datatable Testing

      Continuing from the previous episode, let's now write a series of tests for our datatable component.

    7. Comments Component

      In this lesson, we'll convert the comments functionality from vanilla Laravel to a Livewire component. Components like these are great use-cases for Livewire components, where we don’t want to trigger a full page-refresh after submitting a form.

    8. Comments Component Testing

      Let's continue with the comments component we wrote in the previous episode, and learn how to test it.

    9. Livewire Polling

      Let's have a look at an example that uses polling in Livewire. Polling can prove useful when your components should continuously refresh to display the latest data.

    10. File Uploads

      Moving on, let's explore file uploading in Livewire. Livewire makes use of temporary uploads which allows us to perform real-time validation and image previews. Let's take a look at these with an example using posts with a cover image.

    11. File Uploads Testing

      Now, let's learn how to test the file upload component that we wrote in the previous episode.

    12. Events With Tags Example

      Let's review Livewire's event system by playing with a third-party tagging library. Livewire allows you to fire and listen for events in the front-end or the back-end, which makes component communication a cinch.

    13. Tags Component Testing

      Once again, let's test our tags component, as well as the Livewire events.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes