Reactive composables
Observe enabled, active, fallback, target, status, and error state through Vue refs.
Vue 3 · TypeScript · Fullscreen API
Fullscreen utilities built for Vue 3
Reactive, strongly typed, SSR-safe fullscreen utilities using Vue composables, a renderless component, a directive, an optional plugin, and a framework-light controller.
Feature overview
One core, several Vue-friendly interfaces
Use the integration level that fits the application while keeping the same fullscreen state and structured result model.
Strong TypeScript surface
Public options, results, errors, controller state, component props, and directive values are typed.
SSR-safe imports
Browser globals are guarded so importing the package does not touch the DOM at module load.
Vue integration
Choose a renderless component, directive, optional plugin, or Composition API functions.
Framework-light controller
Use the same browser compatibility core outside a component setup scope.
Optional CSS fallback
An optional CSS pseudo-fullscreen fallback is available.
Usage
Toggle a target from a user gesture
Fullscreen requests can still be rejected by browser activation or embedding policy, so display structured errors to the user.
FullscreenPanel.vue
<script setup lang="ts">
import { useTemplateRef } from "vue";
import { useScreenfull } from "vue-screenfull";
const target = useTemplateRef<HTMLElement>("target");
const { isEnabled, isFullscreen, error, toggle } =
useScreenfull();
</script>
<template>
<section ref="target">
<button
type="button"
:disabled="!isEnabled"
@click="toggle(target)"
>
{{ isFullscreen ? "Exit fullscreen" : "Enter fullscreen" }}
</button>
<p v-if="error" role="alert">{{ error.message }}</p>
</section>
</template>What this example uses
useTemplateRef()for a Vue 3 template target.useScreenfull()for reactive state and actions.- A semantic button so the request begins from a direct user gesture.
- An alert region for structured error feedback.
- A visible label that reflects the current fullscreen state.
Explore
Try the library or inspect every public type
Live playground
Try page, element, image-style, and video targets; compare native and CSS fallback modes; and inspect diagnostics, events, and structured errors.
Open the live playgroundAPI documentation
Browse composables, the controller, component, directive, plugin, options, results, errors, and exported TypeScript types.
Read the API documentationMigration
Moving from screenfull
vue-screenfull is an independent Vue 3 library, not a drop-in replacement. It adds reactive refs, lifecycle integration, structured results, and optional Vue-facing APIs.
Read the complete migration guidePlatform notes
Browser and mobile considerations
Support is feature-detected. Native fullscreen generally requires transient user activation and remains controlled by the browser, operating system, embedding policy, and WebView host.
Review browser and platform testing guidanceOptional fallback
CSS pseudo-fullscreen
The optional CSS fallback fills the visual viewport and restores the page styles it changes. It is not native fullscreen and cannot hide browser or operating-system interface elements.
Read the CSS fallback documentation