Skip to content

useScreenSafeArea

Category
Export Size
1.5 kB
Last Changed
4 weeks ago

Reactive env(safe-area-inset-*)

image

Demo

top:
right:
bottom:
left:

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:

html
<meta name="viewport" content="initial-scale=1, viewport-fit=cover" />

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

ts
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.

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

Type Declarations

typescript
/**
 * Reactive `env(safe-area-inset-*)`
 *
 * @see https://vueuse.org/useScreenSafeArea
 */
export declare function useScreenSafeArea(): {
  top: ShallowRef<string, string>
  right: ShallowRef<string, string>
  bottom: ShallowRef<string, string>
  left: ShallowRef<string, string>
  update: () => void
}

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
Fernando Fernández
vaakian X
Ayaka Rizumu
Jelf

Changelog

v12.4.0 on 1/10/2025
dd316 - feat: use passive event handlers everywhere is possible (#4477)
v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)

Released under the MIT License.

Conference Offer
Get 50% OFF the Yearly or Lifetime Plan
Access 1450+ lessons on Vue, Pinia, Vite, Tailwind + more
Get Offer
20
hours
:
10
minutes
:
41
seconds
: