Component

Vue Safe Area Component

<DomSafeArea>

Applies selected device safe-area insets in any layout. App shell and app stack already reserve their own insets, so no extra wrapper is needed there. Enable viewport-fit=cover in the app viewport meta tag for edge-to-edge iOS layouts.

Playground

Try every prop live

Safe area playground

Adjust the props to explore sizing, content, and behaviour.

Safe area playground

DOM Studio Phone

Content inside the safe area

On desktop the phone simulates a cutout and home indicator. On a real device, padding comes from its safe-area insets.

Bottom content stays reachable

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomSafeArea } from '@getdom/studio';

const data = reactive({
		"edges": [
			"top",
			"bottom"
		]
	});
</script>

<template>
	<DomSafeArea
		v-bind="data"
	/>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`edges`	array	Array<unknown>	["top","bottom"]	Safe-area edges to apply: top, bottom, left, right.

Auto-generated from Safe area.props and inline _edit hints.

Slots

Name	Scope	Description
#(default)	—	Content that should avoid device cutouts and home indicators.