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

SourceDemoDocs

Contributors

Sergey Danilchenko

Changelog

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

Released under the MIT License.