Skip to content
On this page

useDeviceMotion

Category
Last Changed
3 months ago

Reactive DeviceMotionEvent. Provide web developers with information about the speed of changes for the device's position and orientation.

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()
import { useDeviceMotion } from '@vueuse/core'

const {
  acceleration,
  accelerationIncludingGravity,
  rotationRate,
  interval,
} = useDeviceMotion()
StateTypeDescription
accelerationobjectAn object giving the acceleration of the device on the three axis X, Y and Z.
accelerationIncludingGravityobjectAn object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity.
rotationRateobjectAn object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma.
intervalNumberA 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

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.
<UseDeviceMotion v-slot="{ acceleration }">
  Acceleration: {{ acceleration }}
</UseDeviceMotion>
<UseDeviceMotion v-slot="{ acceleration }">
  Acceleration: {{ acceleration }}
</UseDeviceMotion>

Type Declarations

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 declare type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>
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 declare type UseDeviceMotionReturn = ReturnType<typeof useDeviceMotion>

Source

SourceDemoDocs

Contributors

Anthony Fu
Antério Vieira
Shinigami
wheat
Alex Kozack

Changelog

v4.11.2 on 5/30/2021
68c7d - feat(typedef): add return typedefs (#543) (#544)
v5.0.0-beta.2 on 5/25/2021
5bede - feat: introduce components & directives (#486)
useDeviceMotion has loaded