Handle Touch Events in Vue.js With vue-touch

Joshua Bemenderfer

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.

Installation

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.

src/main.js

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

Vue.use(VueTouch);

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

Usage

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.

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

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/

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

Events

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

Methods

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.
<template>
  <v-touch ref="swiper" @swipe="handleSwipe">
    <p>Swiper, no swiping!</p>
  </v-touch>
</template>

<script>
export default {
  mounted() {
    this.$refs.swiper.disable('swipe')
  }
}
</script>

Config

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.

✖ Clear

🕵 Search Results

🔎 Searching...