Vue.js plugin to recognize touch, mouse, pointer events using hammerjs
npm install vue-recognizerVue.js plugin to recognize touch, mouse, pointer events using Hammer.js.
``bash`
npm install --save vue-recognizer
Import vue-recognizer and install it.
`ts
import Vue from 'vue';
import VueRecognizer from 'vue-recognizer';
Vue.use(VueRecognizer);
`
`html
v-recognizer:pan="onPan"
v-recognizer:pan.right="onPanRight"
>
Lorem ipsum
`
Prepare plugin file to install this plugin as below. Then name it such as vue-recognizer.ts and put it into plugins folder.
`ts
import Vue from 'vue';
import VueRecognizer from 'vue-recognizer';
Vue.use(VueRecognizer);
`
To load it, configure nuxt.config.js or nuxt.config.ts as below.
`ts
const config = {
plugins: [
{
src: '~/plugins/vue-recognizer.ts',
ssr: false
}
]
};
export default config;
`
- v-recognizer:pan="onPan"v-recognizer:pan.start="onPanStart"
- v-recognizer:pan.move="onPanMove"
- v-recognizer:pan.end="onPanEnd"
- v-recognizer:pan.cancel="onPanCancel"
- v-recognizer:pan.left="onPanLeft"
- v-recognizer:pan.right="onPanRight"
- v-recognizer:pan.up="onPanUp"
- v-recognizer:pan.down="onPanDown"
-
- v-recognizer:pinch="onPinch"v-recognizer:pinch.start="onPinchStart"
- v-recognizer:pinch.move="onPinchMove"
- v-recognizer:pinch.end="onPinchEnd"
- v-recognizer:pinch.cancel="onPinchCancel"
- v-recognizer:pinch.in="onPinchIn"
- v-recognizer:pinch.out="onPinchOut"
-
- v-recognizer:press="onPress"v-recognizer:press.up="onPressUp"
-
- v-recognizer:rotate="onRotate"v-recognizer:rotate.start="onRotateStart"
- v-recognizer:rotate.move="onRotateMove"
- v-recognizer:rotate.end="onRotateEnd"
- v-recognizer:rotate.cancel="onRotateCancel"
-
- v-recognizer:swipe="onSwipe"v-recognizer:swipe.left="onSwipeLeft"
- v-recognizer:swipe.right="onSwipeRight"
- v-recognizer:swipe.up="onSwipeUp"
- v-recognizer:swipe.down="onSwipeDown"
-
- v-recognizer:tap="onTap"v-recognizer:doubletap="onDoubleTap"`
-