useFullscreen

リアクティブな Fullscreen API。特定の要素（およびその子孫）をフルスクリーンモードで表示し、必要がなくなったらフルスクリーンモードを終了するためのメソッドを追加します。これにより、オンラインゲームなどの希望するコンテンツをユーザーの画面全体を使用して表示し、フルスクリーンモードがオフになるまでブラウザのユーザーインターフェース要素や他のアプリケーションを画面から取り除くことが可能になります。

使用法

import { useFullscreen } from '@vueuse/core'

const { isFullscreen, enter, exit, toggle } = useFullscreen()

フルスクリーンを指定した要素。一部のプラットフォーム（iOSのSafariなど）では、ビデオ要素のみでフルスクリーンが許可されています。

<script setup lang="ts">
import { useFullscreen } from '@vueuse/core'
import { useTemplateRef } from 'vue'

const el = useTemplateRef('el')
const { isFullscreen, enter, exit, toggle } = useFullscreen(el)
</script>

<template>
  <video ref="el" />
</template>

コンポーネントの使用法

<template>
  <UseFullscreen v-slot="{ toggle }">
    <video />
    <button @click="toggle">
      Go Fullscreen
    </button>
  </UseFullscreen>
</template>