vue-touch

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

This is a Vue 3 compatible version of the original vue-touch plugin.

Installation

npm

npm install hammerjs vue-touch

Direct include

Include Hammer.js and vue-touch in your HTML:

<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>
<script src="vue-touch.min.js"></script>

Usage

Basic Setup

import { createApp } from "vue";
import VueTouch from "vue-touch";

const app = createApp({
  // your app options
});

app.use(VueTouch);
app.mount("#app");

Global Options

You can configure default options for recognizers:

import VueTouch from "vue-touch";

// Configure global options before installing
VueTouch.config.swipe = {
  direction: "horizontal",
  threshold: 100,
};

app.use(VueTouch);

Custom Events

Register custom events before installing the plugin:

import VueTouch from "vue-touch";

// Register a custom doubletap event
VueTouch.registerCustomEvent("doubletap", {
  type: "tap",
  taps: 2,
});

app.use(VueTouch);

Template Syntax

Use the v-touch directive in your templates:

<div
  v-touch:tap="onTap"
  v-touch:pan="onPan"
  v-touch:swipe="onSwipe"
  v-touch:press="onPress"
  v-touch:pinch="onPinch"
  v-touch:rotate="onRotate"
></div>

Local Options

Use v-touch-options to configure specific recognizers:

<div
  v-touch:pan="onPan"
  v-touch-options:pan="{ direction: 'horizontal', threshold: 50 }"
  v-touch:swipe="onSwipe"
  v-touch-options:swipe="{ direction: 'right' }"
></div>

Supported Events

The following gestures are supported (based on Hammer.js recognizers):

• tap - Quick touch
• pan - Drag/swipe in any direction
• pinch - Two-finger pinch
• press - Long press
• rotate - Two-finger rotation
• swipe - Quick swipe

Directions

For events that support direction (pan, swipe), you can specify:

• 'up'
• 'down'
• 'left'
• 'right'
• 'horizontal'
• 'vertical'
• 'all'

Event Handler

The event handler receives the Hammer.js event object:

methods: {
  onTap(event) {
    console.log('Tapped!', event)
    // event.type - the event type (e.g., 'tap')
    // event.center - center position {x, y}
    // event.target - the target element
    // ...see Hammer.js docs for more
  }
}

Migration from Vue 1.x/2.x

The API remains largely the same, but there are some differences:

1. Installation: Use app.use() instead of Vue.use()
2. Handler updates: Handlers now update reactively when the binding changes

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build minified version
npm run build

License

MIT