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.”
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.
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
:
- npm install vue-touch@next --save
Or Yarn:
- yarn add vue-touch@next
Then, enable the plugin in your main app file.
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
. 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.
pan
, panstart
, panmove
, panend
, pancancel
, panleft
, panright
, panup
, pandown
pinch
, pinchstart
, pinchmove
, pinchend
, pinchcancel
, pinchin
, pinchout
press
, pressup
rotate
, rotatestart
, rotatemove
, rotateend
, rotatecancel
swipe
, swipeleft
, swiperight
, swipeup
, swipedown
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.<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.
:enabled="boolean"
prop, or pass an object to enable and disable them individually.:options="{}"
prop.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.
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.
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!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.