1---
2category: Sensors
3---
4 
5# usePointerLock
6 
7Reactive [pointer lock](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API).
8 
9## Basic Usage
10 
11```ts
12import { usePointerLock } from '@vueuse/core'
13 
14const {
15  isSupported,
16  lock,
17  unlock,
18  element,
19  triggerElement
20} = usePointerLock()
21```
22 
23## Component Usage
24 
25```vue
26<template>
27  <UsePointerLock v-slot="{ lock }">
28    <canvas />
29    <button @click="lock">
30      Lock Pointer on Canvas
31    </button>
32  </UsePointerLock>
33</template>
34```
35 
36## Type Declarations
37 
38```ts
39export interface UsePointerLockOptions extends ConfigurableDocument {}
40export interface UsePointerLockReturn extends Supportable {
41  element: ShallowRef<MaybeElement>
42  triggerElement: ShallowRef<MaybeElement>
43  lock: (e: MaybeElementRef | Event) => Promise<MaybeElement>
44  unlock: () => Promise<boolean>
45}
46/**
47 * Reactive pointer lock.
48 *
49 * @see https://vueuse.org/usePointerLock
50 * @param target
51 * @param options
52 *
53 * @__NO_SIDE_EFFECTS__
54 */
55export declare function usePointerLock(
56  target?: MaybeElementRef,
57  options?: UsePointerLockOptions,
58): UsePointerLockReturn
59```
60