Vue Use Utilities

# useFullscreen

useFullscreen

Reactive Fullscreen API build on top of screenfull.js (opens new window)

# Example

Click the image to make it fullscreen

# Usage

<div class="img-wrapper">
  <img
    src="https://picsum.photos/seed/5e1d4e565e68e705e901b050/1920/1080"
    ref="imgRef"
  />

  <div>
    <button @click="toggleFullscreen">Toggle Fullscreen</button>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
import { useFullscreen } from '@vueblocks/vue-use-core'

export default {
  setup () {
    const imgRef = ref(null)
    const {
      isFullscreen,
      toggleFullscreen
    } = useFullscreen(imgRef)

    return {
      imgRef,
      isFullscreen,
      toggleFullscreen
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Typing

/**
 * Reactive Fullscreen API build on top of screenfull.js
 * @param {HTMLElement} target
 * @return {boolean} isFullscreen
 * @return {function} toggleFullscreen
 */
declare const useFullscreen: (target: HTMLElement) => {
    isFullscreen: Ref<boolean>;
    toggleFullscreen: () => void;
};
1
2
3
4
5
6
7
8
9
10

← useInstance →