Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Livewire

Building Infinite Scroll with Livewire v4

Load more content as user scrolls.

1 February 20261 min readLivewireاقرأ بالعربية

On this page

  1. Component

Implement infinite scroll pagination.

Component

php
@php
new class extends Livewire\Component {
    public int $perPage = 10;
    
    public function loadMore(): void
    {
        $this->perPage += 10;
    }
}
@endphp

<div>
    @foreach(Post::take($perPage)->get() as $post)
        <article>{{ $post->title }}</article>
    @endforeach
    
    <div x-intersect="$wire.loadMore()"></div>
</div>
All articles

Keep reading

  • Authorization in Livewire v4 Components1 February 20261 min read
  • Blaze Pre-Compiler: Massive Performance Gains in Livewire v41 February 20261 min read
  • Building a Bookmark Feature with Livewire v41 February 20261 min read