How to properly link vue-awesome-swiper and vue-router in Nuxt.js?

Question

JavaScript

When developing a mobile version of the Nuxt application, it became necessary to go to another page (another category) when swiping right / left. I decided to use the vue-awesome-swiper already used in the project through the directive.
Make three slides (previous, current, next) with an initial second element and on the slide-change-transition-end event do $router.replace('new path').
However, a problem arises, first the html code is rendered, after which the swiper is tied up with the directive. In this case, the layout jumps to the previous slide, then back to the new current one. The same if you use the swiper as a component through .

Is there any way to implement such a scheme through Nuxt, or does the concept of the framework itself prohibit such behavior?

Answer 1

Why do you need a slideshow in this case? And what's the difference nuxt or not.
You need to either hang native events in the mounted hook:

document.addEventListener('touchstart', this.handleTouchStart, false);        
document.addEventListener('touchmove', this.handleTouchMove, false);

and in the methods, look at the data from the event and check where the user is swiping and do $router.replace('new path').
Or use a ready-made solution, for example
https://github.com/jerrybendy/vue-touch-events