Nuxt-hammer NPM

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

Install

This plugin supports NuxtJS >= 2.0.

npm

Available through npm as nuxt-hammer.

npm install nuxt-hammer

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

As a plugin

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

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

Vue.use(NuxtHammer)

And on nuxt.config.js add plugin configuration.

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

Now you are ready for usage.

Usage

Using the `v-hammer` directive

<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:

// change the threshold for all swipe recognizers
NuxtHammer.config.swipe = {
  threshold: 200
};

<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 for all available events.