How to fix Livewire wire:navigate doing full page reload

When using Laravel Livewire's wire:navigate feature, you may run into issue of links with wire:navigate doing full page reload instead of SPA navigation.

What is the behavior?

When using the new Livewire's wire:navigate feature, the links with wire:navigate may sometimes do full page reload instead of expected SPA navigation. The issue may be gone after navigating to some other routes in your app, and mainly happen when you open the app (or refresh the browser window).

What causes the issue?

The problem here is with loading Livewire's JavaScript. You can find the following information in the docs:

By default, Livewire injects the JavaScript and CSS assets it needs into each page that includes a Livewire component.

In case of page that doesn't have any components, the JS file would not be loaded. Wire:navigate directive in this case does nothing, because it needs the Livewire's JS to be loaded in order to interupt the full page reload.

How to fix the issue with wire:navigate

You should manually include Livewire's styles and scripts on your page to make sure it can load and interupt the navigation:

 1<html>
 2<head>
 3    ...
 4    @livewireStyles
 5</head>
 6<body>
 7    ...
 8    @livewireScripts
 9</body>
10</html>

You may find more information about including assets section of official Livewire docs.