Infinite Scroll with Livewire
Playing
02. Setting up

Episodes

0%
Your progress
  • Total: 35m
  • Played: 0m
  • Remaining: 35m
Join or sign in to track your progress

Transcript

00:00
So if you are new to Laravel or LiveWire, we're going to take this episode just to get a fresh Laravel project set up with Laravel Breeze,
00:06
which is a starter kit for Laravel. We're going to manually install LiveWire, and then we're going to do something really important, which is disable Alpine JS within that Breeze starter kit.
00:16
That's really important because LiveWire version 3 comes with Alpine already bundled, and that means we could potentially get a conflict. And a little bit later on when we look at our Intersection
00:27
Observer API using an Alpine plug-in is just not going to work. So we're going to go ahead and get started with a completely fresh project.
00:35
So let's go and use the Laravel installer here to create out a project called LiveWire Infinite Scroll. Now, we're going to use the Laravel Breeze starter kit
00:43
here. We can choose LiveWire with Alpine here, but we're going to do this manually just so we can see the steps.
00:49
And we don't really care about dark mode support, and we'll just choose any testing framework here and not initialize a Git repository. So we're going to wait for this to finish, and once it's done,
00:59
we'll get everything set up. We'll register. We'll get on our dashboard. We'll pull LiveWire in, and we will make sure it's working.
01:05
So the application our database is going to use is MySQL here. I already have a fresh database created called LiveWire Infinite Scroll. And let's just wait for this to finish, and we are good to go.
01:18
OK, we're done installing now. Let's head over to our browser, and you can see that our app is open. We're going to go ahead and migrate our database now.
01:25
If you need to make any changes, of course, come over to EMV and just update your connection settings. And of course, I already have this database created. So we're just going to go ahead and run
01:34
phpr to migrate here, and we should be good. OK, so I can go ahead and register an account now. The dashboard is where we want to be on, so we can put our LiveWire component
01:44
for our infinite scrolling in there. So we are now logged in on our dashboard and ready to go. So we can go ahead and install LiveWire now by just grabbing the Composer Require command for LiveWire.
01:57
Pretty straightforward. That's really all we need to do to get LiveWire version 3 installed. We don't need to add anything to our main app file.
02:06
We are good to go. So to test this, we're going to go ahead and create out an example component if you are new to LiveWire. So we're going to go ahead and say LiveWire Make,
02:15
and let's just call this Example. So if you are new to LiveWire, this has created two files, the class and the view. The view is, of course, where we render everything out and show
02:25
what we need to do, and the class contains all of the standard PHP stuff that you'd find. So we're going to go and just head over to our dashboard.blade.php file, and we're
02:36
going to go ahead and output this LiveWire component just inside here just to make sure everything is working. So if we head back over to our app here, give this a refresh, hopefully you don't see any errors, and we are good.
02:48
So now that we have our component in there, let's just go ahead and add a really simple example to this. So over in the Example.blade.php file under Resources, Views, and LiveWire, this is where our content goes,
03:04
and we have that Example.php class over in App and LiveWire where we can pass stuff down to our views. So let's just go ahead and create out a public property in here with a greeting.
03:14
So let's just say greeting, and we'll just say hello, and we'll go ahead and output this on here in the normal way that we do with Blade. OK, good.
03:28
So give that a refresh. We see hello. We pretty much know now that LiveWire is working. OK, so we're going to go and just take a look at our app.js
03:38
file over in here. I said before that when we install LiveWire v3, this automatically comes with Alpine because LiveWire uses Alpine behind the scenes.
03:48
So what we don't want to do is have two instances of Alpine running because this is going to cause problems a little bit later on. So we're going to go ahead and just get rid of this Alpine import, window.alpine assignment, and the Alpine start initializer,
04:03
and that's pretty much what we need to do. Now, we haven't even run npm install and npm run dev yet. Good idea to do that now just so everything builds and is working, and we can open up a new tab here to run any other commands.
04:16
So there we go. A fresh Laravel Breeze app with LiveWire installed and the inertia problem sorted out, which is going to be a problem later if we don't remove it.
8 episodes• 35 mins

Overview

Adding infinite scroll to Livewire can be tricky. Let’s implement a really easy (but slow) solution, and then look at a better way to continuously load more records as we scroll the page.

We’ll also include a really easy way to implement the Intersection Observer API with an Alpine plugin, and add some enhancements to create a nice, smooth scrolling experience.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!