# vue-touch

> Hammer.js based touch events plugin for Vue.js

Latest version **1.1.0** (published 2016-05-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-touch
pnpm add vue-touch
yarn add vue-touch
bun add vue-touch
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2016-05-03 |
| First published | 2014-02-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | yyx990803 |

## Links

- npm: https://www.npmjs.com/package/vue-touch
- Repository: https://github.com/vuejs/vue-touch
- Homepage: https://github.com/vuejs/vue-touch#readme
- Issues: https://github.com/vuejs/vue-touch/issues
- npm.io page: https://npm.io/package/vue-touch

## Dependencies (1)

- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.6

## Recent versions

- 1.1.0 (latest) — 2016-05-03
- 2.0.0-beta.4 (next) — 2017-01-24
- 2.0.0-beta.3 — 2017-01-16
- 2.0.0-beta.2 — 2017-01-14
- 2.0.0-beta.1 — 2017-01-06
- 1.0.2 — 2016-02-01
- 1.0.1 — 2016-02-01
- 1.0.0 — 2016-02-01
- 0.1.2 — 2014-10-27
- 0.1.1 — 2014-10-09
- 0.1.0 — 2014-10-09
- 0.0.2 — 2014-07-23
- 0.0.1 — 2014-02-26

## README

# This plugin is deprecated and not maintained anymore.

## vue-touch

> Touch events plugin for Vue.js. **This plugin does not support Vue 2.0 yet.**

This is a directive wrapper for Hammer.js 2.0.

## Install

> This branch is only compatible with Vue 1.0. For the Vue 2.0 compatible rewrite, see the `next` branch

#### CommonJS

- Available through npm as `vue-touch`.

  ``` js
  var VueTouch = require('vue-touch')
  Vue.use(VueTouch)
  ```

#### Direct include

- You can also directly include it with a `<script>` tag when you have Vue and Hammer.js already included globally. It will automatically install itself, and will add a global `VueTouch`.

## Usage

#### Using the `v-touch` directive

``` html
<a v-touch:tap="onTap">Tap me!</a>

<div v-touch:swipeleft="onSwipeLeft">Swipe me!</div>
```

#### Configuring Recognizer Options

There are two ways to customize recognizer options such as `direction` and `threshold`. The first one is setting global options:

``` js
// change the threshold for all swipe recognizers
VueTouch.config.swipe = {
  threshold: 200
}
```

Or, you can use the `v-touch-options` directive to configure the behavior on a specific element:

``` html
<!-- detect only horizontal pans with a threshold of 100 -->
<a
  v-touch:pan="onPan"
  v-touch-options:pan="{ direction: 'horizontal', threshold: 100 }">
</a>
```

#### Registering Custom Events

``` js
// example registering a custom doubletap event.
// the `type` indicates the base recognizer to use from Hammer
// all other options are Hammer recognizer options.
VueTouch.registerCustomEvent('doubletap', {
  type: 'tap',
  taps: 2
})
```
``` html
<a v-touch:doubletap="onDoubleTap"></a>
```

See [Hammer.js documentation](http://hammerjs.github.io/getting-started/) for all available events.

See `/example` for a multi-event demo. To build it, run `npm install && npm run build`.

## License

[MIT](http://opensource.org/licenses/MIT)

---
_Source: https://npm.io/package/vue-touch · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._