v-touch-swipe directive

Quasar offers full-featured Vue directives that can totally replace libraries like Hammerjs: v-touch-pan, v-touch-swipe, v-touch-hold and even v-touch-repeat.

These directives also work with mouse events, not only touch events, so you are able to build cool functionality for your App on desktops too.

We will be describing v-touch-swipe on the lines below.

Usage

Swipe with your mouse on the area below to see it in action. If using a mouse, you need to do it quick.

Handling Mouse Events

When you want to handle mouse events too, use the mouse modifier:

<div v-touch-swipe.mouse="userHasSwiped">...</div>

Inhibiting TouchSwipe

When you want to inhibit TouchSwipe, you can do so by stopping propagation of the touchstart / mousedown events from the inner content:

<div v-touch-swipe.mouse="userSwiped">
  <!-- ...content -->
  <div @touchstart.stop @mousedown.stop>
    <!--
      TouchSwipe will not apply here because
      we are calling stopPropagation() on touchstart
      and mousedown events
    -->
  </div>
  <!-- ...content -->
</div>

However, if you are using capture or mouseCapture modifiers then events will first reach the TouchHold directive then the inner content, so TouchSwipe will still trigger.

Events after TouchSwipe triggers

Once a swipe is recognized, the directive consumes the events that follow it, so that a swipe does not also count as a tap or as a click, be it on the element itself or on any of its parents. It stops every subsequent touchmove / mousemove and then the event that ends the gesture: touchend for touch events and mouseup for mouse events.

This means that @touchmove, @touchend and @mouseup listeners on the element will not be called after a swipe has been recognized. They are still called when the movement does not qualify as a swipe. Should you need them in both cases, listen for them in the capture phase:

<div v-touch-swipe="userHasSwiped" @touchend.capture="userHasLifted">
  <!-- ...content -->
</div>