Inertia: Add beforeVisit option to Inertia.visit and InertiaLink

[sebastiandedeyne]

I don't have an exact API for this yet, but here's the idea…

It'd be nice to be able to do something before a visit (and potentially cancel the visit).

Something that comes up a lot is displaying a confirm modal before deleting something. We could render a modal in the beforeVisit call, and only do the visit after the user has confirmed.

<InertiaLink :href="`/posts/${post.id}`" method="DELETE" beforeVisit="confirm">
  Delete post
</InertiaLink>

This could get rid of unnecessary boilerplate in applications. I thought of this after a discussion with @michaeldyrynda on Discord.

[innocenzi]

Not sure if this is part of this scope, but it would also be great to be able to cancel any visit when on a specific page.

My use case for this was to display a confirmation modal when leaving a page with a form, and I had to do a lot of tweaking to achieve this.

I don't know how to properly do that, though, but this is something that Vue Router has.

[reinink]

Would it make sense to update all the Inertia link components to include the new event callbacks? That said, currently the event callbacks do NOT support cancelling events, so that still wouldn't help here. Of course, we could update them to support cancelling by doing a return false.

That would give you this ability:

<InertiaLink :href="`/posts/${post.id}`" method="DELETE" :onStart="() => confirm('Are you sure you delete this post?')">
  Delete post
</InertiaLink>

//cc @claudiodekker

[claudiodekker]

Yeah, I'm in favour of that idea 👍

EDIT: Vue implementation in https://github.com/inertiajs/inertia/pull/235

[innocenzi]

This would be nice, indeed. 👍

[reinink]

The onStart() callback can now cancel visits by returning false (see #233). That sets the path forward for adding this behaviour to the Inertia links. 👍

[reinink]

This is now possible in the link components in the React and Vue.js adapters (just need to release). There is also a WIP PR for Svelte. Going to close this, since it's basically done. 👍