usePointerLock ​
Reactive pointer lock.
Demo ​
Basic Usage ​
js
import { usePointerLock } from '@vueuse/core'
const { isSupported, lock, unlock, element, triggerElement } = usePointerLock()
import { usePointerLock } from '@vueuse/core'
const { isSupported, lock, unlock, element, triggerElement } = usePointerLock()
Component Usage ​
This function also provides a renderless component version via the
@vueuse/components
package. Learn more about the usage.
html
<UsePointerLock v-slot="{ lock }">
<canvas />
<button @click="lock">
Lock Pointer on Canvas
</button>
</UsePointerLock>
<UsePointerLock v-slot="{ lock }">
<canvas />
<button @click="lock">
Lock Pointer on Canvas
</button>
</UsePointerLock>