Laravel Jetstream Inertia With Non Interia Homepage

laravel-jetstream-inertia-blade-homepage.md

Using non inertia homepage in Laravel Jetstream

Being new to inertia, I had to wrap my head around having / be a regular blade view. Inertia kept displaying the home page in popups. The reason is that inertia-link makes http requests and the response tells interia to dynamically change the page. When Inertia finds a page without a component, it displays it instead of redirecting. The short answer is use <a> links instead. I had to do a few things after changging my root path / to a blade view so I am documenting them here incase anyone else ever comes across this scenario.

Login / Register page links

The AuthenticationCard.vue component uses inertia-link, which makes http requests.

You want to change that to a normal <a> link.

Logout redirect

The this.$inertia.post(route('logout')) in AppLayout.vue returns a 302.

In bootstrap.js, axios is defined globally. Just use axios to post to logout instead:

axios.post(route('logout')).then(response => {
    window.location = '/'
});

VerifyEmail.vue

<inertia-link :href="route('logout')" method="post" as="button"...

You have to switch this ajax button to:

<a @click="logout" as="button" class="cursor-pointer underline text-sm text-gray-600 hover:text-gray-900">Logout</a>

And add a logout method:

logout() {
    axios.post(route('logout')).then(response => {
        window.location = '/'
    });
}