vue-gestures

vue-gestures is a collection of Vue.js directives for touch gestures.

It is a work in progress at the moment, any help welcome!

Installation

Browserify (npm)

$ npm install vue-gestures

component

component will follow soon.

Standalone / RequireJS / AMD

Download dist/vue-gestures.js and include it in your HTML page.

vue-gestures is available under the name vueGestures for AMD module loaders, or is directly set on window.vueGestures.

Example

vue-gestures can be loaded into your ViewModel with Vue.plugin.

var vueGestures = require('vue-gestures'); // with Browserify / CommonJS
Vue.use(vueGestures);

<a v-tap="action()">Click me</a>

Directives

v-tap

Acts like a click event, except it removes the 300ms delay on touch devices.

v-touch

Acts like a mousedown event, triggers the function immediately.

Be careful: every default browser behavior is prevented, including the scroll.

Configuration

global parameters

Some parameters are applied to all the directives. You can also add these parameters on a directive level, e.g.

Vue.use(vueGestures, {
  touch: { prefix: 'gestures' }
});

prefix

Adds a prefix to the directives loaded by the plugin.

Vue.use(vueGestures, { prefix: 'gestures' });

<a v-gestures-tap="action()">Click me</a>
<a v-gestures-touch="action()">Click me</a>

v-tap

moveTolerance (default: 12)

After the touchstart event, if the touch moves farther than this distance (in pixels), the action will be canceled (the user didn’t want to click).

Load the directives separately

If you don’t want to load all the directives, it is possible to load them separately:

var gestures = require('vue-gestures');
Vue.use(gestures.tap, {
  // parameters
});
Vue.use(gestures.touch, {
  // parameters
});

License

MIT

Special thanks

Illustration made by Raphaël Bastide with scri.ch.