vue-fullscreen
A Vue.js component, directive, and API for toggling fullscreen mode in web applications.
What is vue-fullscreen?
vue-fullscreen is a Vue.js library that provides components, directives, and an API for toggling fullscreen mode in web applications. It simplifies using the native browser Fullscreen API by offering Vue-specific abstractions, handling cross-browser inconsistencies, and supporting both Vue 2 and Vue 3. It solves the problem of implementing consistent, user-gesture-compliant fullscreen functionality across different browsers and Vue versions.
Vue.js developers building applications that require fullscreen experiences, such as media players, presentations, dashboards, or immersive web apps. It's particularly useful for those who prefer Vue-centric solutions over raw JavaScript APIs.
Developers choose vue-fullscreen because it offers a unified, Vue-native approach to fullscreen functionality with multiple usage patterns (component, directive, API). Its built-in browser compatibility handling and support for both Vue 2 and Vue 3 reduce implementation complexity compared to using the raw Fullscreen API directly.
Overview
A simple Vue.js component for fullscreen
Use Cases
Best For
- Adding fullscreen toggle buttons to Vue media players or video components
- Creating immersive presentation or dashboard modes in Vue applications
- Implementing fullscreen image galleries or data visualizations
- Building kiosk-style applications that require fullscreen browser experiences
- Handling fullscreen compatibility across different browsers in Vue projects
- Managing fullscreen state with Vue's reactive data patterns (v-model)
Not Ideal For
- Applications targeting iPhone users, as vue-fullscreen explicitly does not support fullscreen on iPhone Safari.
- Projects requiring fullscreen mode to persist across page navigation or tab switching, since browser security exits fullscreen on navigation.
- Teams using non-Vue frameworks like React or Angular, as this library is specifically designed for Vue.js ecosystems.
- Developers needing highly customized fullscreen UI with pre-styled backgrounds or complex animations, due to removed props like 'background' in recent versions.
Pros & Cons
Pros
Offers components, directives, and APIs that integrate seamlessly with Vue's reactivity system, such as v-model binding for the fullscreen component, simplifying state management.
Provides dedicated packages for both Vue 2 and Vue 3, ensuring compatibility across different Vue ecosystems without major rewrites.
Built on screenfull.js, it abstracts away browser differences and offers fallbacks like pageOnly mode for unsupported environments, reducing cross-browser bugs.
Supports component-based, directive-based, and programmatic API approaches, allowing developers to choose the best fit for their codebase, as shown in the live demos.
Cons
The README explicitly states that Safari on iPhone is not supported, which severely limits its use for mobile-first or responsive web applications.
Fullscreen state changes are asynchronous, and developers must await promises or use callbacks, which can complicate immediate state updates and lead to timing issues.
Version upgrades have removed features like the 'background' prop and renamed methods (e.g., 'enter' to 'request'), requiring code adjustments and potentially breaking existing implementations.
Frequently Asked Questions
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.