Skip to content
This repository has been archived by the owner. It is now read-only.
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time
May 3, 2016
May 3, 2016

This plugin is deprecated and not maintained anymore.


Touch events plugin for Vue.js. This plugin does not support Vue 2.0 yet.

This is a directive wrapper for Hammer.js 2.0.


This branch is only compatible with Vue 1.0. For the Vue 2.0 compatible rewrite, see the next branch


  • Available through npm as vue-touch.

    var VueTouch = require('vue-touch')

Direct include

  • 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.


Using the v-touch directive

<a v-touch:tap="onTap">Tap me!</a>

<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>

Configuring Recognizer Options

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 }">

Registering Custom Events

// 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.



You can’t perform that action at this time.