Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

SPA Feeling with wire:navigate

Premium
2 min read

These days, many applications are built as single-page applications (SPA). Livewire v3 offers a single-page application experience.


Basic Usage

To use this feature, you just need to add a wire:navigate directive to the navigation link. For example, if we have a couple of routes.

Route::get('posts', \App\Livewire\ShowPosts::class);
Route::get('posts/create', \App\Livewire\CreatePost::class);
Route::get('users', \App\Livewire\ShowUsers::class);

Then we add wire:navigate to each link.

<nav>
<a href="/posts" wire:navigate>Posts</a>
<a href="/posts/create" wire:navigate>Create Post</a>
<a href="/users" wire:navigate>Users</a>
</nav>

After clicking a link, Livewire will load the new page in the background, and only then will...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (29 h 14 min)

You also get:

54 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

DS
Dmytro Sakharuk ✓ Link copied!

How to show the progress bar when switching between pages (paginate links)? In general, how to show the progress bar manually, for example, during a search query?

N
Nerijus ✓ Link copied!

What do you mean by progress bar?

DS
Dmytro Sakharuk ✓ Link copied!

A progress bar at the top of the page when switching between pages. navigate.show_progress_bar

N
Nerijus ✓ Link copied!

It mig be because naviga doesnt have wire:navigate added. Try publishing assets and

DS
Dmytro Sakharuk ✓ Link copied!

Pagination works through gotoPage previousPage nextPage methods where change paginators variable. In general, wire:navigate is inappropriate here, since it is simply a change of the paginators public property and, accordingly, overloads the DOM. So the question is whether there is a way to manually display the progress bar.

N
Nerijus ✓ Link copied!

You should raise a discussion on the livewire repo as this is a core function.

DS
Dmytro Sakharuk ✓ Link copied!

Thank you for your attention to the question!

FF
Francisco Ferreira Roque Júnior ✓ Link copied!

If you can't see the progress bar, probably it's because it's loading to fast. you can add a sleep(3) to you Livewire component inside the render method just to simulate a loading delay. and you will see the progress bar in the top of the page, very nice.

We'd Love Your Feedback

Tell us what you like or what we can improve

Feel free to share anything you like or dislike about this page or the platform in general.