---
title: Fullscreen Plugin
desc: >-
  A Quasar plugin to toggle the fullscreen state of your app through the Web
  Fullscreen API.
---
There are times when you want your website or App to run in fullscreen.
Quasar makes it easy by wrapping the [Web Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API).

> [!WARNING]
> 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.

## AppFullscreen API

### Props

- `isCapable` (boolean, optional)
  Does browser support it?
- `isActive` (boolean, optional, reactive)
  Is Fullscreen active?
- `activeEl` (Element, optional, reactive)
  The DOM element used as root for fullscreen, otherwise 'null'
  Examples: `document.fullscreenElement`, `null`

### Methods

- `request(target?: Element): Promise<void>`
  Request going into Fullscreen (with optional target)
  Params:
    - `target` (Element, optional)
      Optional Element of target to request Fullscreen on
      Examples: `document.getElementById('example')`
  Returns: `Promise<void>` — A Promise which is resolved when transitioned to fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
- `exit(): Promise<void>`
  Request exiting out of Fullscreen mode
  Returns: `Promise<void>` — A Promise which is resolved when exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.
- `toggle(target?: Element): Promise<void>`
  Request toggling Fullscreen mode (with optional target if requesting going into Fullscreen only)
  Params:
    - `target` (Element, optional)
      Optional Element of target to request Fullscreen on
      Examples: `document.getElementById('example')`
  Returns: `Promise<void>` — A Promise which is resolved when transitioned to / exited out of fullscreen mode. It gets rejected with 'Not capable' if the browser is not capable, and with an Error object if something else went wrong.

### Vue Injection

Accessible via `$q.fullscreen` (e.g., `this.$q.fullscreen` in Options API or `useQuasar().fullscreen` in Composition API).

## Installation

Add to `quasar.config.js`:

```js
framework: {
    plugins: [
      'AppFullscreen'
    ]
}
```

## Usage

> [!TIP]
> For an exhaustive list of properties and methods, please check out the API section.

```js
import { AppFullscreen } from 'quasar'

// Requesting fullscreen mode:
AppFullscreen.request()
  .then(() => {
    // success!
  })
  .catch(err => {
    // oh, no!!!
  })

// Exiting fullscreen mode:
AppFullscreen.exit()
  .then(() => {
    // success!
  })
  .catch(err => {
    // oh, no!!!
  })
```

```js
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()

  // Requesting fullscreen mode:
  $q.fullscreen.request()
    .then(() => {
      // success!
    })
    .catch(err => {
      // oh, no!!!
    })

  // Exiting fullscreen mode:
  $q.fullscreen.exit()
    .then(() => {
      // success!
    })
    .catch(err => {
      // oh, no!!!
    })
}
```

### Basic

```vue
<template>
  <div class="q-pa-md">
    <q-btn
      color="secondary"
      @click="$q.fullscreen.toggle()"
      :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
      :label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
    />
  </div>
</template>
```

### On custom element

```vue
<template>
  <div class="q-pa-md">
    <q-btn
      color="secondary"
      @click="toggle"
      :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
      :label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
    />
  </div>
</template>

<script setup>
import { useQuasar } from 'quasar'

const $q = useQuasar()

function toggle(e) {
  const target = e.target.parentNode.parentNode.parentNode

  $q.fullscreen
    .toggle(target)
    .then(() => {
      // success!
    })
    .catch(err => {
      // uh, oh, error!!
      alert(err)
      console.error(err)
    })
}
</script>
```

> [!WARNING]
> On some phones this will have little effect:
> 
> - For example, on Samsung S4, when App goes into fullscreen, the top bar will slide up but still remain on screen.
> - On Nexus phones, on the other hand, like Nexus 5, Android navigation buttons and top bar disappear completely.
> 
> It all depends on the Web Fullscreen API support of the platform the code is running on.

## Watching for fullscreen changes

```html
<template>...</template>

<script setup>
  import { useQuasar } from 'quasar'
  import { watch } from 'vue'

  const $q = useQuasar()

  watch(
    () => $q.fullscreen.isActive,
    val => {
      console.log(val ? 'In fullscreen now' : 'Exited fullscreen')
    }
  )
</script>
```