You're browsing the documentation for an old version of Livewire. Consider upgrading your project to Livewire 3.x.

Defer Loading

Be amazing at Livewire
with our in-depth screencasts. Watch Now

Introduction

Introduction

Livewire offers a wire:init directive to run an action as soon as the component is rendered. This can be helpful in cases where you don't want to hold up the entire page load, but want to load some data immediately after the page load.

             1class ShowPost extends Component
 2{
 3    public $readyToLoad = false;
 4 
 5    public function loadPosts()
 6    {
 7        $this->readyToLoad = true;
 8    }
 9 
10    public function render()
11    {
12        return view('livewire.show-posts', [
13            'posts' => $this->readyToLoad
14                ? Post::all()
15                : [],
16        ]);
17    }
18}

            1<div wire:init="loadPosts">
2    <ul>
3        @foreach ($posts as $post)
4            <li>{{ $post->title }}</li>
5        @endforeach
6    </ul>
7</div>

The loadPosts action will be run immediately after the Livewire component renders on the page.

← Previous Topic Dirty States

Next Topic → AlpineJS