Inertia: [inertia-vue] Listening to & intercepting visit (navigation) events

[baaskoen]

If you were to implement a feature like warning a user before exiting a page, how would you go about and implement this in Inertia?

If the user navigates back or clicks on a <inertia-link />, the "onbeforeunload" event is not actually called. When a user navigates back in history, the "popstate" event seems to be called indefinitely.

Are there any events that I can subscribe my listeners to?

[Juhlinus]

Hi @baaskoen,

As of right now InertiaJS does not have an API supporting this.

There was actually a discussion regarding this on our Discord.

And user @hawezo made an implementation to intercept events.

https://gist.github.com/hawezo/bac9a14ff7611cc8bec713955b413c95

Hope this helps. 😅

[ycs77]

Will this feature be added?

[josespinal]

This seems like an important feature. Opens a lot of UX opportunities.

[victorlap]

@Juhlinus Unfortunately the gist is offline. Do you still have the contents?

[innocenzi]

@victorlap I just changed my username, the Gist is still online. https://gist.github.com/innocenzi/bac9a14ff7611cc8bec713955b413c95

I wouldn't advice using it as-is really, it was just a quick & dirty workaround for my use case.

[AdrianMrn]

I created a PR that could provide a solution for this: https://github.com/inertiajs/inertia/pull/152. I appreciate any feedback!

[reinink]

The new event system (#208) has been merged in, which allows you to listen for visit events and cancel them. I hope to tag a release tomorrow, and I also plan to add documentation to the website explaining how to use it. 🙌