Fullscreen     

There are times when you want your website or App to run in fullscreen.
Quasar makes it easy by wrapping the Web Fullscreen API.

Please note that the behavior is different depending on the platform the code is running on, due to the fact that there isn’t a fixed Web standard for Web Fullscreen API yet.

Installation

Edit /quasar.conf.js:

framework: {
  plugins: ['AppFullscreen']
}

Basic Usage

// outside of a Vue file
import { AppFullscreen } from 'quasar'

// determine if platform has Fullscreen capability:
(Boolean) AppFullscreen.isCapable

// Determining if website is in fullscreen mode:
(Boolean) AppFullscreen.isActive

// Requesting fullscreen mode:
AppFullscreen.request()

// Exiting fullscreen mode:
AppFullscreen.exit()

// Toggle fullscreen mode:
AppFullscreen.toggle()
// inside of a Vue file

// determine if platform has Fullscreen capability:
(Boolean) this.$q.fullscreen.isCapable

// Determining if website is in fullscreen mode:
(Boolean) this.$q.fullscreen.isActive

// Requesting fullscreen mode:
this.$q.fullscreen.request()

// Exiting fullscreen mode:
this.$q.fullscreen.exit()

// Toggle fullscreen mode:
this.$q.fullscreen.toggle()

Example

Watching for fullscreen changes:

// vue file
<template>...</template>

<script>
export default {
  watch: {
    '$q.fullscreen.isActive' (val) {
      console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
    }
  }
}
</script>
App Visibility
Last updated: Sat May 19 2018
Caught a mistake or want to contribute to the documentation? Suggest an edit on GitHub