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 it replace <title> and <body> content with the new one.
While a new page is loading, Livewire will show the loading indicator at the top. You can configure this setting in the config/livewire.php by changing the navigate.show_progress_bar value.
When redirecting to other pages, for example, after creating a post to the posts list page, to have a SPA experience, you need to provide a navigate argument to the redirect method.
return $this->redirect('/posts', navigate: true);Reloading Scripts in Header
By default, Livewire won't reload the whole <head> section. It's a common practice to add scripts with a hash version so that the browser would always use the newest file instead of a cached old one.
For Livewire to reload the <script> tag, you need to add a data-navigate-track.
<head> <script src="/app.js?id=123" data-navigate-track></script></head>If you use Laravel's Vite plugin for building assets, you don't need to do anything. Livewire automatically will add the data-navigate-track.
<head> @vite(['resources/css/app.css', 'resources/js/app.js'])</head>You can learn more about wire:navigate in the official documentation.
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?
What do you mean by progress bar?
A progress bar at the top of the page when switching between pages. navigate.show_progress_bar
It mig be because naviga doesnt have
wire:navigateadded. Try publishing assets andPagination 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.
You should raise a discussion on the livewire repo as this is a core function.
Thank you for your attention to the question!
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.