Vue 2 API

Control the same fullscreen target from multiple buttons, keyboard shortcuts or application logic. The plugin exposes the fullscreen singleton as $fullscreen.

Playground

Edit this example

Loading example…

<script>
import { fullscreen } from 'vue-fullscreen'

export default {
  data: () => ({ isFullscreen: false }),
  methods: {
    enter() {
      fullscreen
        .enter(this.$refs.target, {
          pageOnly: false,
          teleport: true,
          callback: (isFullscreen) => {
            this.isFullscreen = isFullscreen
          },
        })
        .catch(console.error)
    },
    exit() {
      fullscreen.exit().catch(console.error)
    },
  },
  beforeDestroy() {
    if (fullscreen.element === this.$refs.target)
      void fullscreen.exit().catch(console.error)
  },
}
</script>

<template>
  <div>
    <button :disabled="isFullscreen" @click="enter">Enter fullscreen</button>
    <section ref="target">
      <button v-if="isFullscreen" @click="exit">Exit fullscreen</button>
      <!-- Your fullscreen content -->
    </section>
  </div>
</template>

In native mode, await fullscreen.exit() in a route leave guard before removing the target.

Targets

Pass the fullscreen target as the first argument to fullscreen.enter():

Target type	Example
HTML element	fullscreen.enter(document.getElementById('panel'))
Vue ref object	fullscreen.enter(panelRef)
Component instance	fullscreen.enter(this.$refs.panel); uses its $el
id string	fullscreen.enter('panel') or fullscreen.enter('#panel')
CSS selector	fullscreen.enter('.panel')
Getter	fullscreen.enter(() => this.$refs.panel)

Strings are resolved by id first (with an optional # prefix), then as CSS selectors. An id takes priority when both match. The current target is resolved on each entry.

Omitting the target or passing null directly uses document.body. Missing selectors, unmounted refs and other unresolved targets reject the Promise.

Toggle or force a state

await fullscreen.toggle(element, { pageOnly: true }) // Toggle
await fullscreen.toggle(element, { pageOnly: true }, true) // Enter
await fullscreen.toggle(element, undefined, false) // Exit
await fullscreen.exit() // No-op when inactive

enter() defaults to document.body. Calling it while active does not switch targets; exit first, then request the new target.

Methods

fullscreen.enter(target?: FullscreenTarget, options?: ApiOptions): Promise<void>
fullscreen.toggle(target?: FullscreenTarget, options?: ApiOptions, force?: boolean): Promise<void>
fullscreen.exit(): Promise<void>

Instance properties

Property	Type	Meaning
isFullscreen	boolean	Whether the controller is active
isSupported	boolean	Native fullscreen API support
element	Element | null	Target element; null after exit
options	Session options	Current settings; do not modify during a session

These are ordinary properties, not Vue reactive refs. Use callback to update Vue state, or use the component's v-model.

Options

Option	Type	Default	Purpose
pageOnly	boolean	false	Use page-only mode
teleport	boolean	false	Move to the body; disabled for a body target
fullscreenClass	string	'fullscreen'	Class to add while active
callback	(isFullscreen: boolean) => void	None	Report changes in state

Callbacks

fullscreen.enter(target, {
  callback(value) {
    // Synchronize application state
    isFullscreen = value
  },
})

Migrating older versions

Use enter() instead of request(), and isSupported instead of isEnabled. The old names remain compatibility aliases.