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.

Installation


// quasar.conf.js

return {
  framework: {
    directives: [
      'TouchSwipe'
    ]
  }
}

Usage

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

All directions



One direction only



Several directions



Capturing Mouse Events

When you want to capture mouse actions too, use the mouse modifier:

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

Note on HMR

Due to performance reasons, when doing HMR updates, the argument and modifiers are not updated, so you will require a window refresh.

API