Vue Fullscreen

Overview

The vue-fullscreen is a versatile Vue.js component that simplifies integrating fullscreen functionality in applications. Built on the robust screenfull.js library, it enhances user experience by allowing seamless transitions to fullscreen mode with minimal configuration. Whether you’re creating a media-rich application or an interactive webpage, this component makes it incredibly easy to engage users with fullscreen displays.

With its straightforward installation and intuitive API, vue-fullscreen is adaptable to various use cases. Key features include support for multiple browsers and user-friendly methods for triggering fullscreen mode without exiting, making it a valuable addition for developers looking to enrich their Vue.js applications.

Features

• Simple Installation: Easily installable via NPM with just a few lines of code; simply import and call Vue.use() to get started.
• Toggle Fullscreen Mode: The toggle() method allows for instant fullscreen switching, whether using the entire document or a specific element as the target.
• Browser Support Check: The isEnabled() method lets you check if the browser supports the fullscreen API, ensuring compatibility across platforms.
• Asynchronous Operation: Methods return promises to guarantee you can accurately track fullscreen state after user gestures.
• Custom Callbacks: Set callbacks to execute on fullscreen state changes for enhanced interactivity and user feedback.
• Flexible Element Targeting: Choose any DOM element to enter fullscreen, providing more control over the UI experience.
• Dynamic API Changes: Adapted method names for better clarity; for example, enter is now request, streamlining the API usage.
• Special Handling for iOS: Includes unique support for handling fullscreen mode in different iOS devices, ensuring a smooth experience on mobile.