Nuxt.js should handle "back" swipe gesture by default

[SHxKM]

What problem does this feature solve?

I'm unsure if this is a feature request or a bug report: when navigating back with the left swipe gesture on iOS devices, the previous route is re-rendered before the new one is rendered. See explanation and demo below.

I'm experiencing what's described in this Vue.js plugin (which I couldn't get to work with Nuxt.js):

You can swipe with edge gesture in iOS Safari/WKWebview/Wechat. The page will trigger history.back()/history.forward() after the page is sliding finished. then the transition animation of router will still triggering, that's redundant.

Does Nuxt.js have anything built-in to handle this case?

Update: Actually, the plugin above does not inherently solve this issue. Even if the transition period is set to 0, the previous component (the one we're navigating back from) still flickers on the screen before the new one (the one we're navigating back to) is displayed.

A demo can be seen here: https://django-nuxt-ssr.herokuapp.com/

Open this web-app on an iOS device, navigate to the about page (question mark), and then swipe right ("back" gesture). The about page appears again before the homepage is rendered as it should.

Even the HN demo at https://hn.nuxtjs.org exhibits this behaviour.. (which makes me think maybe there isn't much to do about this?)

What does the proposed changes look like?

It would be cool if Nuxt.js handled this back/forward swiping behaviour out of the box, especially since there's incompatibility with the plugin I link to above (probably because the plugin itself was last updated 2 years ago).

_{This feature request is available on Nuxt community (#c9520)}

[SHxKM]

issue #3663, which was auto-marked as stale, seems to be related. It's worth noting that (at least some) Vue.js apps, like this example app, do not demonstrate this behaviour.

[SHxKM]

Just to further-follow on this: it seems that this behaviour is exhibited on Safari as well when using the Mac's swipe to go back on the touchpad.

[mmeester]

Did you already find a solution for this nasty behavior?

[atinux]

Hi,

I think in order to do this, we should handle the backward navigation by using a cache version of the previous page and also disable the transition, I guess this could be experimented at first with a middleware 🤔

[atinux]

Can someone try with features.transitions: false in nuxt.config.js?

[ChrisvdLeij]

Any progress on this? This is still an issue on iOS devices. The only solution i have at the moment is to preventDefault the touchstart when the user swipes from the edges

In mounted > default.vue

if (/apple/i.test(navigator.vendor)) { this.$el.addEventListener('touchstart', (e) => { if (e.pageX > 10 && e.pageX < window.innerWidth - 10) return e.preventDefault() }) }

[andysay]

uptime

[danielroe]

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. I'm closing this issue as it's marked as a Nuxt 2 related enhancement and it's not a critical issue.

That doesn't mean it might not be relevant for Nuxt 3. If it is, please feel free to open a new issue (or just comment, and I can reopen it). 🙏

Thank you for your understanding and for your contribution to Nuxt! 🎉