Handle Touch Events in Vue.js with vue-touch


While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

It seems these days that more and more people are foregoing their tried-and-true big screens, keyboards and mice, for a tiny new-fangled slab of glass and metal that does nothing but frustrate those of us with large fingers. Because of this, unfortunately, it has almost become unthinkable to develop only for the reasonable platforms (desktops, laptops, and mainframes.) We now have to worry about handling things like taps and swipes with greasy fingers. To make matters worse, the web platform doesn’t quite support that sort of stuff too well. For those of us developing with Vue.js though, never fear. vue-touch is here to make your finger-poking woes go away. It uses Hammer.js under the hood to provide a nice simple API for handling touch events.


NOTE: vue-touch for Vue 2.0 is currently (05-03-2017) in beta, and therefore must be installed with the @next tag.

# Yarn
$ yarn add vue-touch@next
# or NPM
$ npm install vue-touch@next --save

Now, as always, enable the plugin in your main app file.

import Vue from 'vue';
import VueTouch from 'vue-touch';
import App from 'App.vue';


new Vue({
  el: '#app',
  render: h => h(App)


VueTouch adds a single component, v-touch. It normally renders as a div unless configured otherwise with a tag property. It wraps your components and sets up the Hammer.js manager and recognizers. All you have to do is bind to the events.

    <v-touch @swipeleft="doSomething">
      <p>I can now be swiped on!</p>
    <v-touch @rotate="rotateAThing">
      <p>Rotate me!</p>

You can pass Hammer.js configuration options to the v-touch component with :EVENT-options. (ex. :swipe-options, :rotate-options) Full documentation on the various options can be found here: https://hammerjs.github.io/getting-started/

    <v-touch @swipeleft="doSomething" :swipe-options="{ threshold: 200 }">
      <p>I can now be swiped on!</p>
    <v-touch @rotate="rotateAThing" :rotate-options="{ pointers: 3 }">
      <p>Rotate me!</p>


There are quite a few events, but they pretty much all do what they say on the tin.

  • Panning - pan, panstart, panmove, panend, pancancel, panleft, panright, panup, pandown
  • Pinching - pinch, pinchstart, pinchmove, pinchend, pinchcancel, pinchin, pinchout
  • Pressing - press, pressup
  • Rotating -rotate, rotatestart, rotatemove, rotateend, rotatecancel
  • Swiping - swipe, swipeleft, swiperight, swipeup, swipedown
  • Tapping - tap


v-touch components expose a few methods as well.

  • enable(eventName) will enable the recognizer for the specified event.
  • disable(eventName) will disable the recognizer for the specified event.
  • toggle(eventName) will toggle the enabled state of the recognizer.
  • disableAll() and enableAll() will disable and enable all recognizers for the component.
  • isEnabled(eventName): Boolean returns the enabled state of a recognizer.
  <v-touch ref="swiper" @swipe="handleSwipe">
    <p>Swiper, no swiping!</p>

export default {
  mounted() {


There’s a bit more you can do in the way of configuration.

  • You can enable and disable all recognizers with the :enabled=“boolean” prop, or pass an object to enable and disable them individually.
  • There are a few default options that you can pass with the :options=“{}” prop.
  • You can also register new events (really just events with default options) using VueTouch.registerCustomEvent(eventName, config). This must be called before Vue.use(VueTouch) and can be used like any other event from vue-touch.
// A custom horizontal swipe event.
VueTouch.registerCustomEvent('horizontal-swipe', {
  type: 'swipe',
  direction: 'horizontal'

There you go. Have fun adding random gestures and whatnot to your fancy little app-y things.

Creative Commons License