node package manager


Hammer.js based touch events plugin for Vue.js


Touch events plugin for Vue.js

This is a directive wrapper for Hammer.js 2.0.

  • Available through npm as vue-touch.

    var VueTouch = require('vue-touch')
  • You can also directly include it with a <script> tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a global VueTouch.
<a v-touch:tap="onTap">Tap me!</a>
<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>

There are two ways to customize recognizer options such as direction and threshold. The first one is setting global options:

// change the threshold for all swipe recognizers 
VueTouch.config.swipe = {
  threshold: 200

Or, you can use the v-touch-options directive to configure the behavior on a specific element:

<!-- detect only horizontal pans with a threshold of 100 -->
  v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
// example registering a custom doubletap event. 
// the `type` indicates the base recognizer to use from Hammer 
// all other options are Hammer recognizer options. 
VueTouch.registerCustomEvent('doubletap', {
  type: 'tap',
  taps: 2
<a v-touch:doubletap="onDoubleTap"></a>

See Hammer.js documentation for all available events.

See /example for a multi-event demo. To build it, run npm install && npm run build.