use-vibrate

Drive the Vibration API with validated, optionally repeating patterns.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useVibrate } from "@vizejs/composable/use-vibrate";

Try it

Give haptic feedback

Vibrate in a pattern when something finishes, on devices that can.

Open the interactive example

What to observe: Buzz twice requests a vibration where the API exists and reports whether the device accepted it.

Patterns alternate vibration and pause in milliseconds. stop() cancels a running pattern. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useMounted } from "@vizejs/composable/use-mounted";
import { useVibrate } from "@vizejs/composable/use-vibrate";

const mounted = useMounted();
const { supported, vibrate } = useVibrate({ pattern: [200, 100, 200] });
const result = ref("");

function buzz() {
  result.value = vibrate() ? "Vibration requested." : "The device declined to vibrate.";
}
</script>

<template>
  <div class="composable-example">
    <p>Give haptic feedback when a timer finishes, on devices that can vibrate.</p>
    <button type="button" :disabled="!mounted || !supported" @click="buzz">Buzz twice</button>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : supported
          ? result || "Vibration is available."
          : "Vibration is not available in this browser."
    }}</output>
  </div>
</template>

Runtime contract

API

useVibrate

Drive the Vibration API with validated, optionally repeating patterns. Patterns alternate vibration and pause durations. With interval > 0 the pattern repeats until stop is called or the owning reactive scope stops, which also cancels an ongoing vibration. Server rendering: nothing vibrates and no timer starts; supported is false.

function useVibrate(options: UseVibrateOptions = {}): VibrateControls

const { vibrate, stop } = useVibrate({ pattern: [200, 100, 200] });
vibrate();

Types

VibrationHost

Minimal Vibration API (navigator).

UseVibrateOptions

Options for useVibrate.

VibrateControls

Reactive state and actions returned by useVibrate.