Vue3 Haptic Plugin

A Vue 3 plugin package for haptic feedback with cross-platform support (iOS and Android).

Features

• 🎯 Haptic feedback directive (v-haptic)
• 🍎 iOS native haptic support
• 📱 Android Vibration API support
• 📦 TypeScript support
• 🚀 Vite build configuration
• 📝 Full type definitions

Live Demo

Check out the live example to see the plugin in action!

Installation

npm install vue3-haptic-plugin
# or
yarn add vue3-haptic-plugin
# or
pnpm add vue3-haptic-plugin

Usage

Basic Setup

import { createApp } from 'vue'
import App from './App.vue'
import Vue3HapticPlugin from 'vue3-haptic-plugin'

const app = createApp(App)

// Install the plugin (optional)
app.use(Vue3HapticPlugin)

app.mount('#app')

Using Haptic Feedback

Add haptic feedback to any element using the v-haptic directive:

<template>
  <!-- Default duration (10ms) -->
  <button v-haptic>Click me</button>
  
  <!-- Custom duration as number -->
  <button v-haptic="50">Long haptic</button>
</template>

The directive automatically triggers haptic feedback when the element is clicked.

How it works:

• On iOS devices: Uses native haptic feedback via a hidden switch element
• On other devices: Uses the Vibration API (navigator.vibrate) if available
• Automatically detects the platform and uses the appropriate method

Directive Value:

• v-haptic (no value): Uses default duration of 10ms
• v-haptic="50": Custom duration in milliseconds

License

MIT