90€ an hour. That's what I ask for freelance work. Contact me.
Laravel Livewire

Create a SPA in seconds using wire:navigate in Livewire v3

Benjamin Crozat
Published on Aug 28, 2023 0 comments Edit on GitHub
Create a SPA in seconds using wire:navigate in Livewire v3

Introduction

Have you noticed how speedy this blog is? This must be a SPA, right? Nope! This is thanks to the new HTML attribute wire:navigate in Livewire v3.

Traditional Laravel applications are multi-page and require a full browser page reload whenever the user clicks a link. Single Page Applications (SPAs), on the other hand, nix this approach for a nimbler one - instead of reloading the entire page, only part of it is refreshed. This eliminates the overhead of re-downloading JavaScript and CSS assets during every request, resulting in a significantly enhanced browsing experience.

Let’s learn how it can bring us the speediness of SPAs without their complexity. In this tutorial, I promise, we won’t have to write an API!

How to use wire:navigate

Using wire:navigate is a breeze. Just add it as an attribute to your links:

<nav>
    <a href="/" wire:navigate>Dashboard</a>
    <a href="/posts" wire:navigate>Posts</a>
    <a href="/users" wire:navigate>Users</a>
</nav>

Here’s what happens when you click a link. Instead of the browser visiting the new page, Livewire v3 intercepts the request. It uses its own speedy method to retrieve and render the page, giving your app a noticeable boost.

Using wire:navigate for redirects

You know those moments when you need to redirect users within your app? With wire:navigate, you can make these transitions smooth as butter. Here’s how to do it in your Livewire component:

return $this->redirect('/posts', navigate: true);

This tells Livewire v3 to use its nifty wire:navigate function to whisk users off to the new page - so quick, they’ll hardly notice.

The secret sauce to wire:navigate’s speediness is all in the prefetching. As soon as a user presses down on their mouse, Livewire swings into action. By the time they lift their finger, the new page is ready and waiting.

And for even faster transition times, use the .hover modifier:

<a href="/posts" wire:navigate.hover>Posts</a>

Persist elements across pages with @persist

Want to keep parts of your UI consistent between page loads? Let Livewire v3 help with the @persist directive. It’s perfect for things like audio or video players:

@persist('player')
    <audio src="{{ $episode->file }}" controls></audio>
@endpersist

Your players will carry on playing uninterrupted - no matter how many pages your users browse.

Update the page before navigating away

With wire:navigate, there’s no need to risk losing whatever your user was doing. Just use the livewire:navigating event to run JavaScript before the page change and do what you have to do:

document.addEventListener('livewire:navigating', () => {
    // Modify your HTML here
})

Script evaluation in wire:navigate

Since content is replaced at every page view, you might want to use the event livewire:navigated, which will be called every time the DOM has been fully replaced.

DOMContentLoaded, which will only be called after the first page load, won’t cut it in our case.

- document.addEventListener('DOMContentLoaded', () => { 
+ document.addEventListener('livewire:navigated', () => { 
     // Initiate 3rd-party libraries here...
 });

Reload pages when assets change using wire:navigate

To keep your JavaScript fresh post-deployment, add data-navigate-track to your <script> tags:

<head>
    <script src="/app.js?id=123" data-navigate-track></script>
</head>

Updating the version hash will now force a full page reload, ensuring everyone gets the freshest script.

Conclusion

By now, you’re a pro at making your Laravel application “feel” like a speedy single page application with Livewire v3’s wire:navigate attribute.

Remember, it’s not about turning your application into an SPA - it’s about borrowing the benefits.

Fast, seamless browsing is no longer reserved for JavaScript-heavies. With Livewire and wire:navigate, we have all the power we need! 🔥

Be the first to comment!

Get help or share something of value with other readers!

Great deals for enterprise developers
  • Summarize and talk to YouTube videos. Bypass ads, sponsors, chit-chat, and get to the point.
    Try Nobinge →
  • Monitor the health of your apps: downtimes, certificates, broken links, and more.
    20% off the first 3 months using the promo code CROZAT.
    Try Oh Dear for free
  • Keep the customers coming; monitor your Google rankings.
    30% off your first month using the promo code WELCOME30
    Try Wincher for free →
The latest community links
- / -