Laravel Livewire - No Refresh Between Pages
1 min read

Laravel Livewire - No Refresh Between Pages

Laravel Livewire - No Refresh Between Pages

So how do you make Laravel Livewire not do a full page reload between routes?

YOU DON'T!!!

Well, not out of the box in Livewire 2.0 anyway. One of my misconceptions with Livewire was that it would turn my entire app into a SPA. In reality, Livewire shines when doing on page actions, such as submitting a form or searching/sorting a datatable. Links to other routes in your application are still handled with a full page reload.

However, you can use a turbolinks to get that SPA feel when traversing to other pages in your app.

First, open your terminal in the root directory of  your project and install the turbolinks npm package

npm install --save turbolinks

Require it in your resources/js/app.js file.

...
const turbolinks = require("turbolinks");
turbolinks.start();

Compile your JavaScript in the terminal now that you have updated it.

npm run dev

Verify app.js is in your layout file.

...
    @livewireScripts
    <script src="{{ asset('js/app.js') }}" defer></script>
 </body>

At this point, turbolinks should work in your application. However, to get it to play nice with Livewire 2.0, we have one more step!

Just add the following script tag to the bottom of your body tag in your layout file.

...
    <script src="https://cdn.jsdelivr.net/gh/livewire/turbolinks@v0.1.x/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
</body>

You now have the power of a SPA while still being able to build your UI with blade templates!