SPA mode in livewire v2

How to work spa in version 2

Hey, @jayed

Take a look here:

1 Like

@skywalker thank you for your reply. Do I still need turbolink or are there any other tools available?

If you want to create SPA sites with laravel and livewire the answer is, yes.

Or you can use Inertia.js without livewire

@skywalker thank you for your response.

You are very welcome mate.

Happy coding :slight_smile:

“Yes” does not answer “how?”

I just set up a project to try LW2, no turbolinks, a couple of components and basic hyperlinks (GET routes to LW components) and it’s still all full page reload navigation… not a SPA experience.

I think the obstacle in understanding the goals and the use case in this thread, is that neither the question nor the answer are well-formed, and thus lead to misunderstandings.

So to be more clear: I’m interested in using Livewire and I am, even more specifically, not interested in requiring any further dependencies on turbolinks nor the turbo plugin; and I’m presently of the assumption that Livewire alone lends itself to single-page app (SPA), snappy, no-full-page-reload experiences with it’s native fetch/xhr and Dom-diffing voodoo.

Is this assumption or assertion correct – that Livewire alone offers this type of smooth app experience, even for basic hypertext navigation (GET routes)? And if not, then I think I am really missing the point of Livewire.

Hey, @emjayess

Thanks for your feedback, and I’ll try to do my best in the future to avoid the misleading.

First, Livewire It’s just a package (powerful one) no more no less.

If you are referring to use Livewire in routes, the simple answer is yes, you can use livewire component as (blade view file & controller). But for me, I don’t like this approach because I keep livewire separate as a reusable component.

And TBH with you, I never try the approach you told, I’m working with turbolinks and it works very well.

The Idea of livewire is the following: Imagine you have a Laravel & VueJS app, and you try to compile between the Backend and the frontend using Vue power and axios for instance to send requests … Livewire in simple way combine between the frontend and the backend by sending requests behind the scene to the server without losing control and without page refreshing ++ No JavaScript code needed to wrote :slight_smile:

Anyways, this is the simplest explanation to livewire, I hope you got what I mean.

I get what you mean. And I’ve run through videos and documentation, and have implemented some components.

Yet, when I set up a most basic (stateless) GET route to a Livewire component class (Think menus or navigation), it’s still a full page reload. So, no benefit to this most basic of web navigation experience.

Yeah, as I told you when you use livewire in routes as an invokable class, you just use it like a controller nothing less.

If you want SPA functionality, you must implement turbolinks or us inertiajs, vuejs, nuxtjs and a lot more without livewire at all.