MobileBackButtonPageMixin.js (subscription part)Įxport const mobileBackButtonPageMixin = We will create a mixin and then import it in any page that needs to have this functionality. If a popup is not open and the user presses back button, we will let the app go back. When the page component is mounted, we subscribe to be notified about any open popups. Subscribe to notifications about open popups We decided to use a combination of eventbus plugin and 2 complementing mixins.
#VUE ROUTER BUTTON CODE#
We should make sure we don’t end up with similar code duplicated all over the place. When Vue Router triggers event (“we’re about to leave the current page”) we can react and prevent this from happening, if appropriate. We can achieve this by implementing beforeRouteLeave and/or beforeRouteUpdate. We need to hook into Vue router to get notified that the route is about to change (go back to previous page).If any popups are open AND we are on mobile/tablet, then we will not navigate back and close the pop-up instead. If no popups are open, we should act as normal, i.e. We need to track if we have a popup open or not.However, there is a fairly simple workaround. Intercept back button on mobile and close popup insteadĪs mentioned, there isn’t an event you could subscribe in Javascript that would communicate that back button is pressed.
To include it in your project you only need to change two files: It works on both client and server side, which is great. It is therefore possible to call something like: this.$device.isMobileOrTablet and get a true/false value, depending on the user agent.
via an object injected into Nuxt context and Vue instances. It exposes a set of flags, like isMobile, isTablet, isWindows, etc. To avoid reinventing the wheel, we decided to use a Nuxt module: nuxt-device-detect.
#VUE ROUTER BUTTON FREE#
Yes, we know it’s not 100% reliable, but there simply doesn’t seem to be a better way (happy to be corrected - feel free to comment if you know a more reliable way to detect mobiles/tablets during SSR rendering). On the server we can only really rely on one thing - User-Agent. Remember, we have SSR and we want to serve correct HTML immediately - before we get to the browser and can question its capabilities or execute any clever Javascript. Unfortunately, there still isn’t a 100% reliable method to do this that would work both server- and client-side. There isn’t really such thing as “listening to back button event” in Javascript.Īnother complication is that we don’t want to intercept back button on desktop - only where the users are likely to be on a touch screen - that is, on mobiles and tablets. Unfortunately, it is easier said than done. We decided we needed to intercept back button, and if any pop-up is open, close it instead. This can be very frustrating - you are on a product page, you look at a product image, you click back - and suddenly you’re back on the products list page. Since we’re just in a browser, back button takes the user to the previous page, rather than closing the pop-up. The very first test with a “real user” has shown us that on mobile clicking back button is a very strong urge when trying to close full-screen popups - for example when we show a zoomed-in image of a product. Thanks to great work done in Vuetify and Nuxt, once we started paying more attention to being mobile-friendly, the transition wasn’t difficult and fairly quickly we had a page that worked quite well on mobile. The first version of OSBO was not particularly mobile-friendly.
0 kommentar(er)
