Laravel Infinite Scrolling with Livewire

Today we’re going to learn the magical art of infinite scrolling pagination. More specifically, we will be building a Laravel Livewire component that will scroll infinitely like you might see on Twitter or Facebook feeds.

The “infinite scrolling” or “infinite pagination” livewire component will dynamically query data using cursor pagination which helps keep things efficient.

This should be a pretty simple tutorial, so let’s get started!

Part 1 — Setup our Laravel Livewire Project

It’s assumed that you’ve already set up a laravel project and have tailwindcss installed and set up. Laravel jetstream comes with livewire and tailwindcss baked in, so that’s one option you can use as well.

If you don’t already have that set up go ahead and do that now. Don’t worry, I’m a very patient man, I’ll wait. (Checks watch. Coughs. Checks watch again…Asks “Hey, everything okay? Did you fall in?”).

Oh, good to go? That was fast!

Let’s begin by setting up livewire. If you used jetstream with the livewire stack, then you can skip this part.

$ composer require livewire/livewire

Now let’s update the app layout. The code below is just an example from running the jetstream installer, yours may be different especially if working with an existing codebase. The important parts are the “@livewireStyles” and “@livewireScripts” and…