Tutorial

How To Add Touch Events with vue-touch

Published on May 3, 2017
Default avatar

By Joshua Bemenderfer

How To Add Touch Events with vue-touch

This tutorial is out of date and no longer maintained.

Warning: Since publication, this component has the notice: “This plugin is deprecated and not maintained anymore.”

Introduction

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

Setting Up the Project

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

Use npm to install vue-touch:

  1. npm install vue-touch@next --save

Or Yarn:

  1. yarn add vue-touch@next

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

Using Events and Event Options

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. This includes :swipe-options and :rotate-options.

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

Additional options can be found in the Hammer.js documentation.

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

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

Applying Configuration

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.

Conclusion

In this tutorial, you learned how to apply vue-touch to enable touch events in Vue projects.

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel