# vue2-hammer

> Hammer.js wrapper for Vue 2.x to support some touching operation in the mobile.

Latest version **2.1.2** (published 2018-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue2-hammer
pnpm add vue2-hammer
yarn add vue2-hammer
bun add vue2-hammer
```

## Health

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

Positive: has types package; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2018-10-31 |
| First published | 2017-08-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/vue2-hammer) |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 151.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 251 |
| Author | bsdfzzzy@gmail.com |
| Maintainers | bsdfzzzy |
| Keywords | vue2-hammer |

## Links

- npm: https://www.npmjs.com/package/vue2-hammer
- Repository: https://github.com/bsdfzzzy/vue2-hammer
- Homepage: https://github.com/bsdfzzzy/vue2-hammer#readme
- Issues: https://github.com/bsdfzzzy/vue2-hammer/issues
- npm.io page: https://npm.io/package/vue2-hammer

## Dependencies (2)

- [hammerjs](https://npm.io/package/hammerjs.md) ^2.0.8
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0

## Recent versions

- 2.1.2 (latest) — 2018-10-31
- 2.1.1 — 2018-10-02
- 2.1.0 — 2018-10-02
- 2.0.1 — 2018-08-13
- 2.0.0 — 2018-08-09
- 1.0.7 — 2018-07-31
- 1.0.6 — 2018-01-15
- 1.0.5 — 2017-10-21
- 1.0.4 — 2017-09-18
- 1.0.3 — 2017-08-31
- 1.0.2 — 2017-08-30
- 1.0.1 — 2017-08-30
- 1.0.0 — 2017-08-30

## README

# vue-hammer

Hammer.js wrapper for Vue to support some operation in the mobile

This is a directive wrapper for Hammer.js 2.x. And this repo'inspiration is from v-touch.

If you want to find a same wrapper for Angular4+, you can have a look at [ngx-hammer](https://github.com/bsdfzzzy/ngx-hammer)

## Install

> This plugin supports Vue >= 2.0.

### npm

Available through npm as `vue2-hammer`.

```bash
npm install vue2-hammer
```

```Javascript
import { VueHammer } from 'vue2-hammer'
Vue.use(VueHammer)
```

## Usage

#### Using the `v-hammer` directive

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

<div v-hammer:swipe.left="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
VueHammer.config.swipe = {
  threshold: 200
};
```

```html
<a
  v-hammer:tap="onTap"
  v-hammer:pan:horizontal="onPanHorizontal"
  v-hammer:panstart="onPanStart"
  v-hammer:panend="onPanEnd"
  v-hammer:press="onPress"
  v-hammer:pressup="onPressup"
></a>
<a ></a>
<a ></a>
```

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

### Supported gestures and directions

#### gestures

tap, pan, pinch, press, rotate, swipe

#### directions

up, down, left, right, horizontal, vertical, all

#### Note

Users can use both the gesture and the direction like `v-hammer:swipe.left`. But if your combination is not exist in the hammer, it is not support.

## Run the Example

- Run `yarn` or `npm i`
- Run `yarn build` or `npm run build`
- Open the index.html in the example directory.

## License

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

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