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.

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) }); 

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> 

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

v-touch components expose a few methods as well.

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

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

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