Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


Vue-Gesture is a simple Vue.js gesture events plugin. It runs now under Vue.js 2, which comes from a fork, to see here: The old version for Vue.js 1 is not longer available. See the example for how to use this plugin, simply it's now a component and not a directive anymore. There are a bunches of arguments you can use, i.e. tap, swipe, touchstart etc. When you are in the use of the PC,"tap, longtap, touchstart" will automatically be converted to "click".

  • tap — fires when the element is tapped.
  • doubleTap — this pair of events can be used to detect double taps on the same element
  • longTap — fires when an element is tapped and the finger is held down for more than 750ms.
  • swipe, swipeLeft, swipeRight, swipeUp, swipeDown — fires when an element is swiped
  • touchstart touchmove touchend click- These equivalent to touch the primary event



The updated version is available through npm as vue2-gesture. So simply run npm install vue2-gesture. Then you can use it as follows:

// You may use: 
  window.Vue = Vue;
 var VueGesture = require('vue2-gesture')

Direct include

You can also directly include it with a <script> tag when you have Vue already included globally. It will automatically install itself, and will add a global vueGesture.


Using the vue-gesture component

WARNING: You may have to use <vue2-gesture> if you installed the npm version

You can add a single event with the type parameter or you add a set of events with the types parameter which is a javascript array.

 <vue-gesture :type="'touchstart'"  :call="handleComponent.bind(this,'touchstart')" >touchstart</vue-gesture>
  <vue-gesture :type="'touchmove'"  :call="handleComponent.bind(this,'touchmove')" ><i>touchmove</i></vue-gesture>
  <vue-gesture :type="'touchend'"  :call="handleComponent.bind(this,'touchend')" >touchend</vue-gesture>
  <vue-gesture :type="'doubletap'"  :call="handleComponent.bind(this,'doubletap')">doubleTap</vue-gesture>
  <vue-gesture :type="'tap'"  :call="handleComponent.bind(this,'tap')">tap</vue-gesture>
  <vue-gesture :type="'longTap'"  :call="handleComponent.bind(this,'longTap')">longTap</vue-gesture>
  <vue-gesture :type="'swipe'"  :call="handleComponent.bind(this,'swipe')">swipe</vue-gesture>
  <vue-gesture :type="'swipeLeft'"  :call="handleComponent.bind(this,'swipeLeft')">swipeLeft</vue-gesture>
  <vue-gesture :type="'swipeRight'"  :call="handleComponent.bind(this,'swipeRight')">swipeRight</vue-gesture>
  <vue-gesture :type="'swipeUp'"  :call="handleComponent.bind(this,'swipeUp')">swipeUp</vue-gesture>
  <vue-gesture :type="'swipeDown'"  :call="handleComponent.bind(this,'swipeDown')">swipeDown</vue-gesture>
  <vue-gesture :type="'click'"  :call="handleComponent.bind(this,'click')">click</vue-gesture>
  <vue-gesture :types="['swipeDown','click']"   :call="handleComponent.bind(this,'EVENT')" >swipeDown and click</vue-gesture>

Where handleComponent is a method in your Vue.js web-application. handleComponent should understand this two parameters:

handleComponent: function(str,e){
           // str is the second input, like 'longTap', 'touchmove', 
           // there you can pass some information to the handler 
           // e is the element itself, you may use it or not
           var html = e.srcElement.innerHTML;
           e.srcElement.innerHTML=html+" "+str;


A simpler way to handle vue-gesture events have been provided by @sjoerdloeve and uses this syntax:

<vue-gesture :type="'tap'" :call="() => { changeProperty = true}" >tap</vue-gesture>

Where the type, of course, is changeable.

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 config
vueGesture.config = {
  maxSingleTapTimeInterval: 200

Registering Custom Events

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




touch events plugin for Vue.js.You can v-gesture directive,and directive auguments can use a tap, swipe, etc






No releases published


No packages published