Plugin doesn't work in Nuxt3 + Ionic

[keduardo2117]

Describe the bug
I've followed the instructions but when running the app in iOS, the console prints SafeArea enable -1 and all the var(--safe-area-inset-*) vars give 0px of value.

I enable the plugin in the app.vue like this

await SafeArea.enable({
  config: {
    customColorsForSystemBars: true,
    statusBarColor: '#00000000', // transparent
    statusBarContent: 'light',
    navigationBarColor: '#00000000', // transparent
    navigationBarContent: 'light',
  },
});

And in the nuxt.config.ts I've set the viewport meta tag like this

        {
          name: 'viewport',
          content:
            'viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
        }

But still no success

To Reproduce
Steps to reproduce the behavior:

1. Create a project in Nuxt 3 and install Capacitor and this plugin
2. In app.vue, enable the plugin
3. In index.vue write something like

<template>
  <div id="header">welcome</div>
</template>
<script setup></script>
<style>
#header {
  padding-top: calc(var(--safe-area-inset-top) + 1rem);
}
</style>

Expected behavior
The text welcome should appear below the notch

Screenshots

Desktop (please complete the following information):

• OS: iOS
• Browser App packed using Capacitor
• Version Capaacitor 6

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

[tafelnl]

I am not able to reproduce this. Please provide a minimal reproduction repository for further help

[tafelnl]

As a matter of fact, I see that you're using Nuxt3, which could indicate that you're using SSR. In that case #17 might be of relevance

[keduardo2117]

Hello, yes, I'm using Nuxt3 but I've set ssr:false in the nuxt.config.ts, but I'll still try the recommendations from that bug and report back my results

[keduardo2117]

GM @tafelnl I figured out what the issue was, it's unbelievable, but it was a matter of meta tags.
In my project inside nuxt.config.ts inside app.head.meta I removed this

{
    name: 'viewport',
    content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
}

And it started working, you can even use vueUse useScreenSafeArea.
You can mark this as closed, thank you for your early reply

[tafelnl]

Thanks for getting back with this info