use-wake-lock

Keep the screen awake with the Screen Wake Lock API.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useWakeLock } from "@vizejs/composable/use-wake-lock";

Try it

Keep the screen on

Prevent the screen from sleeping while something is being read or presented.

Open the interactive example

What to observe: Keep screen on asks the browser for a wake lock; Allow sleep releases it. Some browsers refuse, for example on low battery.

With reacquireOnVisible, the lock is requested again when the page becomes visible. Every example renders a neutral message until it mounts, so server and client markup match, and then explains what to do when the browser lacks the API.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { useMounted } from "@vizejs/composable/use-mounted";
import { useWakeLock } from "@vizejs/composable/use-wake-lock";

const mounted = useMounted();
const { supported, active, error, request, release } = useWakeLock();
</script>

<template>
  <div class="composable-example">
    <p>Keep the screen on while a recipe or a slide deck is open.</p>
    <div class="example-actions">
      <button type="button" :disabled="!mounted || !supported || active" @click="() => request()">
        Keep screen on
      </button>
      <button type="button" :disabled="!active" @click="() => release()">Allow sleep</button>
    </div>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : !supported
          ? "Screen Wake Lock is not available in this browser."
          : active
            ? "The screen stays on."
            : error
              ? "The browser did not keep the screen on."
              : "The screen may turn off."
    }}</output>
  </div>
</template>

Runtime contract

API

useWakeLock

Keep the screen awake with the Screen Wake Lock API. Browsers release screen locks when the page is hidden; while a lock is requested, it is re-acquired on the next visibilitychange to visible. Request failures (missing user activation, battery saver) are exposed through error rather than thrown. The lock and the visibility listener are released when the owning reactive scope stops. Server rendering: nothing is requested, supported and active are false.

function useWakeLock(options: UseWakeLockOptions = {}): WakeLockControls

const wakeLock = useWakeLock();
const startPresentation = () => wakeLock.request();

Types

WakeLockSentinelLike

Minimal WakeLockSentinel consumed by useWakeLock.

WakeLockHost

Capabilities used by useWakeLock.

UseWakeLockOptions

Options for useWakeLock.

WakeLockControls

Reactive state and actions returned by useWakeLock.