Skip to content

usePointerLock ​

Category
Export Size
1.36 kB
Last Changed
8 months ago

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>

Source ​

Source • Demo • Docs

Contributors ​

Sergey Danilchenko

Changelog ​

v9.11.0 on 1/17/2023
ae69f - feat: new function (#2590)

Released under the MIT License.