Vue 2 component

Wrap content in the component, then change the v-model value to enter or exit fullscreen. It binds the value prop and input event. Exiting fullscreen automatically sets the bound value to false.

Playground

Edit this example

Loading example…

<script>
import Vue from 'vue'
import VueFullscreen from 'vue-fullscreen'

Vue.use(VueFullscreen)

export default {
  data: () => ({ isFullscreen: false }),
  methods: {
    report(error) {
      this.isFullscreen = false
      console.error(error)
    },
  },
}
</script>

<template>
  <div>
    <button :disabled="isFullscreen" @click="isFullscreen = true">
      Enter fullscreen
    </button>
    <fullscreen
      v-model="isFullscreen"
      :page-only="false"
      :teleport="true"
      @error="report"
    >
      <button v-if="isFullscreen" @click="isFullscreen = false">
        Exit fullscreen
      </button>
      <!-- Your fullscreen content -->
    </fullscreen>
  </div>
</template>

Component props

Prop	Type	Default	Purpose
value	boolean	false	v-model value
pageOnly	boolean	false	Fill the page; automatic fallback if native fullscreen is unavailable
teleport	boolean	false	Move the element to the body while active
fullscreenClass	string	'fullscreen'	Class applied while active
exitOnClickWrapper	boolean	true	Exit on wrapper background clicks, not child clicks

Instance properties

Read these through the component ref.

Property	Type	Purpose
isFullscreen	boolean	Current fullscreen state
isSupported	boolean	Native API support

Events

Event	Argument	Purpose
change	boolean	Fullscreen state changed
input	boolean	Synchronize v-model
error	Error object	A model change or wrapper click triggered a failed operation

Methods

Set ref="panel" on the component to call its methods:

async enterPanel() {
  try { await this.$refs.panel.enter() }
  catch (error) { this.error = error.message }
}

Method	Signature	Purpose
enter	(): Promise<void>	Enter fullscreen
exit	(): Promise<void>	Exit fullscreen
toggle	(force?: boolean): Promise<void>	Toggle or force a state

Migrating older versions

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

The legacy fullscreen prop and update:fullscreen event remain available for compatibility. Use v-model in new code.

<!-- Before -->
<fullscreen
  :fullscreen="isFullscreen"
  @update:fullscreen="isFullscreen = $event"
/>

<!-- Now -->
<fullscreen v-model="isFullscreen" />

// Before
this.$refs.panel.request()
this.$refs.panel.getState()
this.$refs.panel.support

// Now
this.$refs.panel.enter()
this.$refs.panel.isFullscreen
this.$refs.panel.isSupported