# nuxt-hammer

> Hammer.js wrapper for NuxtJS to support some touching operation in the mobile with SSR.

Latest version **2.1.3** (published 2020-12-28) · MIT license · 0 weekly downloads

## Install

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

## 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 | 2.1.3 |
| Published | 2020-12-28 |
| First published | 2020-12-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 152.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mkuchak@gmail.com |
| Maintainers | mkuchak |
| Keywords | nuxt-hammer |

## Links

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

## Dependencies (2)

- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.26.0
- [@squadette/hammerjs](https://npm.io/package/@squadette/hammerjs.md) ^2.1.0-pre3

## Recent versions

- 2.1.3 (latest) — 2020-12-28
- 2.1.2 — 2020-12-28

## README

# nuxt-hammer

Hammer.js wrapper for NuxtJS to support some operation in the mobile with SSR.

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 NuxtJS >= 2.0.

### npm

Available through npm as `nuxt-hammer`.

```bash
npm install nuxt-hammer
```

```Javascript
import { NuxtHammer } from 'nuxt-hammer'
Vue.use(NuxtHammer)
```

### As a plugin
Create a plugin named `plugins/nuxt-hammer.js` and add follow content.

```Javascript
import Vue from 'vue'
import NuxtHammer from 'nuxt-hammer'

Vue.use(NuxtHammer)
```

And on `nuxt.config.js` add plugin configuration.

```Javascript
  plugins: ['~/plugins/nuxt-hammer.js'],
```

Now you are ready for usage.

## Usage

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

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

<div v-hammer:swipe.left="onSwipeLeft">Swipe me!</div>

<div v-hammer:swipe.left="(event)=> onSwipeLeft(event, item, i)">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
NuxtHammer.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/nuxt-hammer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._