1---
2category: Sensors
3---
4 
5# useDeviceMotion
6 
7Reactive [DeviceMotionEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent). Provide web developers with information about the speed of changes for the device's position and orientation.
8 
9## Usage
10 
11```ts
12import { useDeviceMotion } from '@vueuse/core'
13 
14const {
15  acceleration,
16  accelerationIncludingGravity,
17  rotationRate,
18  interval,
19} = useDeviceMotion()
20```
21 
22> Note: For iOS, you need to use `trigger` and bind it with user interaction.
23> After permission granted, the API will run automatically
24 
25| State                        | Type            | Description                                                                                                          |
26| ---------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------- |
27| acceleration                 | `object`        | An object giving the acceleration of the device on the three axis X, Y and Z.                                        |
28| accelerationIncludingGravity | `object`        | An object giving the acceleration of the device on the three axis X, Y and Z with the effect of gravity.             |
29| rotationRate                 | `object`        | An object giving the rate of change of the device's orientation on the three orientation axis alpha, beta and gamma. |
30| interval                     | `Number`        | A number representing the interval of time, in milliseconds, at which data is obtained from the device..             |
31| ensurePermissions            | `boolean`       | Indicates whether the platform requires permission to use the API                                                    |
32| permissionGranted            | `boolean`       | Indicates whether the user has granted permission. The default is always false                                       |
33| trigger                      | `Promise<void>` | An async function to request user permission. The API runs automatically once permission is granted                  |
34 
35You can find [more information about the state on the MDN](https://developer.mozilla.org/en-US/docs/Web/API/DeviceMotionEvent#instance_properties).
36 
37## Component Usage
38 
39```vue
40<template>
41  <UseDeviceMotion v-slot="{ acceleration }">
42    Acceleration: {{ acceleration }}
43  </UseDeviceMotion>
44</template>
45```
46 
47## Type Declarations
48 
49```ts
50export interface UseDeviceMotionOptions
51  extends ConfigurableWindow, ConfigurableEventFilter {
52  /**
53   * Request for permissions immediately if it's not granted,
54   * otherwise label and deviceIds could be empty
55   *
56   * @default false
57   */
58  requestPermissions?: boolean
59}
60/** @deprecated use {@link UseDeviceMotionOptions} instead */
61export type DeviceMotionOptions = UseDeviceMotionOptions
62export interface UseDeviceMotionReturn extends Supportable {
63  acceleration: Ref<DeviceMotionEventAcceleration | null>
64  accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>
65  rotationRate: Ref<DeviceMotionEventRotationRate | null>
66  interval: ShallowRef<number>
67  requirePermissions: ComputedRef<boolean>
68  ensurePermissions: () => Promise<void>
69  permissionGranted: ShallowRef<boolean>
70}
71/**
72 * Reactive DeviceMotionEvent.
73 *
74 * @see https://vueuse.org/useDeviceMotion
75 * @param options
76 */
77export declare function useDeviceMotion(
78  options?: UseDeviceMotionOptions,
79): UseDeviceMotionReturn
80```
81