1---
2category: Sensors
3---
4 
5# useDeviceOrientation
6 
7Reactive [DeviceOrientationEvent](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent). Provide web developers with information from the physical orientation of the device running the web page.
8 
9## Usage
10 
11```ts
12import { useDeviceOrientation } from '@vueuse/core'
13 
14const {
15  isAbsolute,
16  alpha,
17  beta,
18  gamma,
19} = useDeviceOrientation()
20```
21 
22| State      | Type      | Description                                                                                                                |
23| ---------- | --------- | -------------------------------------------------------------------------------------------------------------------------- |
24| isAbsolute | `boolean` | A boolean that indicates whether or not the device is providing orientation data absolutely.                               |
25| alpha      | `number`  | A number representing the motion of the device around the z axis, express in degrees with values ranging from 0 to 360.    |
26| beta       | `number`  | A number representing the motion of the device around the x axis, express in degrees with values ranging from -180 to 180. |
27| gamma      | `number`  | A number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90.   |
28 
29You can find [more information about the state on the MDN](https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent#instance_properties).
30 
31## Component Usage
32 
33```vue
34<template>
35  <UseDeviceOrientation v-slot="{ alpha, beta, gamma }">
36    Alpha: {{ alpha }}
37    Beta: {{ beta }}
38    Gamma: {{ gamma }}
39  </UseDeviceOrientation>
40</template>
41```
42 
43## Type Declarations
44 
45```ts
46export interface UseDeviceOrientationOptions extends ConfigurableWindow {}
47export interface UseDeviceOrientationReturn extends Supportable {
48  isAbsolute: ShallowRef<boolean, boolean>
49  alpha: Ref<number | null, number | null>
50  beta: Ref<number | null, number | null>
51  gamma: Ref<number | null, number | null>
52}
53/**
54 * Reactive DeviceOrientationEvent.
55 *
56 * @see https://vueuse.org/useDeviceOrientation
57 * @param options
58 *
59 * @__NO_SIDE_EFFECTS__
60 */
61export declare function useDeviceOrientation(
62  options?: UseDeviceOrientationOptions,
63): UseDeviceOrientationReturn
64```
65