useDeviceMotion

Demo

Device Motion:

{
  "acceleration": {
    "x": null,
    "y": null,
    "z": null
  },
  "accelerationIncludingGravity": {
    "x": null,
    "y": null,
    "z": null
  },
  "rotationRate": {
    "alpha": null,
    "beta": null,
    "gamma": null
  },
  "interval": 0
}

Usage

import { useDeviceMotion } from '@vueuse/core'

const {
  acceleration,
  accelerationIncludingGravity,
  rotationRate,
  interval,
} = useDeviceMotion()

State	Type	Description
acceleration	`object`	An object giving the acceleration of the device on the three axis X, Y and Z.
accelerationIncludingGravity	`object`	An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity.
rotationRate	`object`	An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma.
interval	`Number`	A number representing the interval of time, in milliseconds, at which data is obtained from the device..

You can find more information about the state on the MDN.

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

vue

<template>
  <UseDeviceMotion v-slot="{ acceleration }">
    Acceleration: {{ acceleration }}
  </UseDeviceMotion>
</template>

Type Declarations

typescript

export interface DeviceMotionOptions
  extends ConfigurableWindow,
    ConfigurableEventFilter {}
/**
 * Reactive DeviceMotionEvent.
 *
 * @see https://vueuse.org/useDeviceMotion
 * @param options
 */
export declare function useDeviceMotion(options?: DeviceMotionOptions): {
  acceleration: Ref<DeviceMotionEventAcceleration | null>
  accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>
  rotationRate: Ref<DeviceMotionEventRotationRate | null>
  interval: Ref<number>
}
export type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>