# Device Motion

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

# State

The useDeviceMotion function exposes the following reactive state:

import { useDeviceMotion } from 'vue-use-web';

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.

# Config

useDeviceMotion function takes an options object as an optional parameter.

import { useDeviceMotion } from 'vue-use-web';

const { acceleration } = useDeviceMotion({
  throttleMs: 30
});
Config Type Description
throttleMs Number The debounce rate of the updates to the state.

# Example

<template>
  <div>
    <h2>acceleration is:</h2>
    <p>x:{{ acceleration.x }}</p>
    <p>y:{{ acceleration.y }}</p>
    <p>z:{{ acceleration.z }}</p>
    <h2>rotation rate is:</h2>
    <p>alpha:{{ rotationRate.alpha }}</p>
    <p>beta:{{ rotationRate.beta }}</p>
    <p>gamma:{{ rotationRate.gamma }}</p>
  </div>
</template>

<script>
import { useDeviceMotion } from "vue-use-web";

export default {
  setup() {
    const { acceleration, rotationRate } = useDeviceMotion();

    return { acceleration, rotationRate };
  }
};
</script>