useScreenSafeArea ​

Reactive env(safe-area-inset-*)

Demo ​

Usage ​

In order to make the page to be fully rendered in the screen, the additional attribute viewport-fit=cover within viewport meta tag must be set firstly, the viewport meta tag may look like this:

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Then we could use useScreenSafeArea in the component as shown below:

import { useScreenSafeArea } from '@vueuse/core'

const {
  top,
  right,
  bottom,
  left,
} = useScreenSafeArea()

import { useScreenSafeArea } from '@vueuse/core'

const {
  top,
  right,
  bottom,
  left,
} = useScreenSafeArea()

For further details, you may refer to this documentation: Designing Websites for iPhone X

Component Usage ​

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>

<UseScreenSafeArea top right bottom left>content</UseScreenSafeArea>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu

vaakian X

Ayaka Rizumu

Jelf

Changelog ​