---
title: App Fullscreen Plugin
related:
  - title: useSoftFullscreen composable
    path: ../vue-composables/use-soft-fullscreen.md
---
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).

> [!TIP]
> **Soft fullscreen**
>
> To make one element of your page take over the viewport without the browser's Fullscreen API (the way the `fullscreen` prop of QTable, QCarousel or QEditor does), use the [useSoftFullscreen](../vue-composables/use-soft-fullscreen.md) composable instead.

> [!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.
    Examples: `request().then(response => { ... }).catch(err => { ... })`
- `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.
    Examples: `exit().then(response => { ... }).catch(err => { ... })`
- `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.
    Examples: `toggle().then(response => { ... }).catch(err => { ... })`

### 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

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

Example "Outside of a Vue file":

```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!!!
  })
```

Example "Inside of a Vue file":

```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!!!
    })
}
```

Example "Basic":

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

Example "On custom element":

```vue
<template>
  <q-btn
    color="secondary"
    @click="toggle"
    :icon="$q.fullscreen.isActive ? 'fullscreen_exit' : 'fullscreen'"
    :label="$q.fullscreen.isActive ? 'Exit Fullscreen' : 'Go Fullscreen'"
  />
</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>
```