use-fullscreen

Enter, exit, and observe fullscreen for an element.

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 { useFullscreen } from "@vizejs/composable/use-fullscreen";

Try it

Present a slide in fullscreen

Show one element in fullscreen and leave with the same control or Escape.

Open the interactive example

What to observe: Present fullscreen fills the screen with the slide; Exit fullscreen or Escape returns to the page.

Fullscreen needs a user gesture. Embedded pages also need the allow="fullscreen" permission from their parent. 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 { ref } from "vue";
import { useFullscreen } from "@vizejs/composable/use-fullscreen";
import { useMounted } from "@vizejs/composable/use-mounted";

const mounted = useMounted();
const slide = ref<HTMLElement | null>(null);
const { supported, isFullscreen, toggle } = useFullscreen(slide);
</script>

<template>
  <div class="composable-example">
    <p>Present one slide in fullscreen and leave with the same button or Escape.</p>
    <section ref="slide" aria-label="Slide">
      <h3>Vize at Vue Fes Japan</h3>
      <button type="button" :disabled="!mounted || !supported" @click="() => toggle()">
        {{ isFullscreen ? "Exit fullscreen" : "Present fullscreen" }}
      </button>
    </section>
    <output aria-live="polite">{{
      !mounted
        ? "Checking browser support…"
        : !supported
          ? "Fullscreen is not available here."
          : isFullscreen
            ? "Presenting in fullscreen."
            : "Showing inline."
    }}</output>
  </div>
</template>

Runtime contract

API

useFullscreen

Enter, exit, and observe fullscreen for an element. Supports the standard Fullscreen API and the WebKit-prefixed variant. isFullscreen is true only while this target is the fullscreen element and follows fullscreenchange, so pressing Escape is reflected. Listeners are removed when the owning scope stops; with autoExit the target also leaves fullscreen then. Server rendering: supported and isFullscreen are false and nothing is requested.

function useFullscreen( target?: MaybeRefOrGetter<FullscreenElementLike | null | undefined>, options: UseFullscreenOptions = {}, ): FullscreenControls

const player = useTemplateRef<HTMLElement>("player");
const { toggle, isFullscreen } = useFullscreen(player);

Types

FullscreenElementLike

Element that can enter fullscreen (standard or WebKit-prefixed).

FullscreenHost

Document-level fullscreen capability (standard or WebKit-prefixed).

UseFullscreenOptions

Options for useFullscreen.

FullscreenControls

Reactive state and actions returned by useFullscreen.