Livewire 3 From Scratch
Building modern, reactive web apps is difficult and time consuming - if you use traditional tools, that is. But with Livewire, you can easily build modern, responsive applications in a fraction of the time. Join Jeremy as he walks you through all of the concepts and features you need to know to start using Livewire 3 in your Laravel apps today.
Progress
Series Info
- Episodes
- 29
- Run Time
- 3h 52m
- Difficulty
- Intermediate
- Last Updated
- Oct 4, 2024
- Version
- Livewire 3
Series Episodes
- The Fundamentals (6)
Introduction
Every journey has a beginning. Ours begins with installing Livewire into our project and learning the basics of Livewire components.Using Actions
Actions are component methods that you can trigger from the browser, allowing you to update the content of your component. Let's write an action and see how it works.Binding Data
We can bind our component's properties to elements within the page by using thewire:modeldirective. This makes is very easy to work with data (particularly form data) in our component.The Basics of Validation
Validation is an important process for web applications, and Livewire makes it very easy to validate user input with theValidateattribute.Using Lifecycle Hooks
Livewire provides a variety of lifecycle hooks that allows you to hook-into and execute code. The two most common hooks are themountandupdatedhook. Let's look at how to use them.Building a Search Component
Before we move forward, let's review some of the fundamental concepts we've talked about thus far and build a search component.
- Important Features (6)
Using Full Page Components
Livewire components can be directly assigned to handle a route, thereby using them to build standalone pages with logic and views. Theses are called full-page components. Let's dive in!Nesting Components
In this episode, you'll learn how to nest Livewire components inside of other Livewire components. This is extremely powerful because it lets you share and re-use behavior across your application.Using Events
Livewire's event system lets you communicate between different components on the page, and you can also interact with and trigger events from JavaScript. Let's look at how we can listen for and trigger Livewire events.Navigating with Navigate
Livewire 3 introduces the Navigate feature which lets us build multi-page applications that behave more like single-page applications. Let's look at how we can use this new feature in our application.Iterating Over Collections
There are specific rules when rendering elements (or other components) inside of a loop. The most important rule is to include a uniquekeyvalue for each iteration, but we can also provide a collection to a view without binding data to a property in themount()method. Let me show you what I mean.Building Admin Dashboard
I want to be able to manage our articles. So, let's build a dashboard that uses a different layout page.
- Handling Forms (4)
Using Form Objects
Forms are the backbone of web applications; they are the primary way we get data from the user. Form objects can make it easy to work with multiple similar forms. Let's look at how to create and use Form objects in this episode.Working with Checkboxes and Radios
Multiple selection form controls, like checkboxes and radios, can work very similarly to normal controls like textboxes. Let's look at an example.Working with Radios and Checkboxes
Multiple selection form controls, like checkboxes and radios, can work very differently than normal controls like textboxes. Let's look at how we can work with these multi-value controls.Working with Dirty States
Good UIs can track un-saved input, aka dirty states. Livewire has built-in support for dirty states with thewire:dirtydirective. Let's look at to use it.
- More Features (13)
Lazy Loading Content
Some components can take a while to load, thereby slowing down the initial page load. But you can counteract this by marking a component as lazy loaded. Let's look at how in this episode.Pagination
You can use Laravel's pagination inside your Livewire components to page between results, and Livewire works behind the scenes to make it feel like a singe-page application. Let's look at how to use it.Url Parameters
Livewire lets you store component properties in the URL's query string, which can be useful for filtering, sorting, and pagination. It's easy to do, so let's use it in our search component.Computed Properties
Computed properties let you access values and cache them for future use within a request, and they are very useful when used with a component's public properties. Let's learn how to use them.Storing Properties in Sessions
Livewire makes it easy to persist property values across page refreshes and changes. In this episode, you'll learn how to use theSessionattribute to store property values in the session.Redirecting
We typically want to redirect users after they submit a form. Livewire requests aren't standard, full-page browser requests; So, we can't use Laravel's built-in redirection mechanisms. Thankfully, Livewire provides redirection support, and it is easy to use. Let's learn how.Locking Properties
By default, Livewire component properties can be freely modified on both the front- and back-end. You sometimes you want to prevent that, and you'll learn how to do so with theLockedattribute in this episode.Uploading Files
We often need to provide our users with the ability to upload files. It's a little different in Livewire, but it provides all the tools we need to easily upload files. Let's learn how.Downloading Files
From a higher level, file downloads work very similar to Laravel, but there are a lot of technical differences because the download is handled with JavaScript. Let's look at how we can provide file downloads in this episode.Bundling and Isolating Updates
Every component update triggers a network request, and this can cause a lot of network traffic. Livewire bundles update requests when multiple components trigger updates at the same time, but it also gives you the ability to control that behavior. Let's learn how.Offline States
At some point in time, our app will be offline due to network issues. Livewire has built-in support to alert users when that happens. In this lesson, you'll learn how to use thewire:offlinedirective.Applying Transitions
It's almost a requirement that modern web applications use transitions when showing and hiding content. Livewire has built-in transition support (thanks to Alpine), and it's easy to use. You'll learn how in this episode.Handling Authentication
Let's look at how we can use Livewire to build a user login form. It's much simpler than using traditional controllers and views.
