# Vue3 & Capacitor (without Ionic): iOS Safe Area Issue **URL:** \ **Category:** Capacitor\ **Created:** [December 27, 2025, 9:24am UTC](https://forum.ionicframework.com/t/vue3-capacitor-without-ionic-ios-safe-area-issue/250255 "2025-12-27T09:24:11Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![ddd00](https://avatars.discourse-cdn.com/v4/letter/d/3ec8ea/32.png) [@ddd00](https://forum.ionicframework.com/u/ddd00)\ **Post date:** [December 27, 2025, 9:24am UTC](https://forum.ionicframework.com/t/vue3-capacitor-without-ionic-ios-safe-area-issue/250255/1 "2025-12-27T09:24:11Z")
I’ve created an web application with Vue 3 (without Ionic). The goal is to make the already existing mobile web application to an iOS/Android App with the help of Capacitor. Capacitor was successfully able to create an iOS build. There is an issue though: The app does not consider the iOS Safe Area, therefore elements on the top of the app are in the space of the iPhone notch: ![image](https://global.discourse-cdn.com/ionicframework/original/3X/d/a/daeaa2f7a25b49ab7ac6c160ee7f7c5f95d84e36.jpeg) What would be the best approach to fix this issue in your opinion? ---
**Author:** ![twestrick](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/twestrick/32/136131_2.png) [@twestrick](https://forum.ionicframework.com/u/twestrick)\ **Post date:** [December 27, 2025, 4:16pm UTC](https://forum.ionicframework.com/t/vue3-capacitor-without-ionic-ios-safe-area-issue/250255/2 "2025-12-27T16:16:27Z")
If not using Ionic, then you’ll need to set the safe area padding yourself. In Capacitor 8, a new [System Bars plugin](https://capacitorjs.com/docs/apis/system-bars) was released. Or look at [GitHub - capacitor-community/safe-area: Capacitor Plugin that patches the safe area for older versions of Chromium](https://github.com/capacitor-community/safe-area).