Component

Wrap content in the component, then change the v-model value to enter or exit fullscreen. Exiting fullscreen automatically sets the bound value to false.

Playground

Edit this example

Loading example…

<script setup>
import { ref } from 'vue'
import { Fullscreen } from 'vue-fullscreen'

const isFullscreen = ref(false)

function report(error) {
  isFullscreen.value = 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
modelValue	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
update:modelValue	boolean	Synchronize v-model
error	Error object	A model change or wrapper click triggered a failed operation

Methods

<script setup>
import { ref } from 'vue'
import { Fullscreen } from 'vue-fullscreen'

const panel = ref()
const error = ref('')
async function enter() {
  try {
    await panel.value.enter()
  } catch (reason) {
    error.value = reason.message
  }
}
</script>

<template>
  <button @click="enter">Enter fullscreen</button>
  <Fullscreen ref="panel" page-only>Content</Fullscreen>
  <p v-if="error" role="alert">{{ error }}</p>
</template>

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
import VueFullscreen from 'vue-fullscreen'
app.use(VueFullscreen)

// Now
import { Fullscreen } from 'vue-fullscreen'

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

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