Hide Action and/or Status Bar Android Studio APK via Vue+Capacitor

I am web developer trying to transition into app developer. For the current project I am working, I have a pipeline based on;

1. Vue SPA development > npm run build
2. install capacitor on that project based on https://capacitorjs.com/docs/getting-started where capacitor www folder looks at dist folder emerging from Vue npm run build
3. open /android folder emerging from capacitor in Android Studio

It ends up with a working app I can install on my phone that does everything designed in Vue, and I can lock it to screen orientation I want via AndroidManifest.xml in Android Studio. However, it also needs to have fullscreen without phone's status bar or action bar being visible.

When I try to follow tutorials on hide status bar via capacitor status-bar plugin or try to hide action bar via MainActivity.java getSupportActionBar().hide() approach I hit a dead end.

This my attempt for hiding status bar based on https://capacitorjs.com/docs/apis/status-bar, below is script part of my App.vue

<script>
import { StatusBar, Style } from '../npm_modules/@capacitor/status-bar';

export default{ 
  ... 
  created(){  
    StatusBar.hide();
  }
}  
</script>

In its current form it doesn't break anything else, but it doesn't hide status bar either. Every tutorial showing its application is done on ionic, but my project is built with vue. To be honest, I am not even sure whether that plugin is supposed to work with Vue, or whether I need to write that code elsewhere.

For the attempt at hiding action bar via Android Studio MainActivity.java here is my code for it;

package com.example.app;
import android.os.Bundle;
import android.view.WindowManager;

import com.getcapacitor.BridgeActivity;

public class MainActivity extends BridgeActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar().hide();
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_main);
    }
}

I also tried iterations of that code without getWindow() line, just keeping getSupportActionBar().hide(); line along with variation on style.xml files changing AppTheme to end with .NoActionBar, as well as trying item lines for windowNoTitle and windowActionBar. I also tried that part with style.xml in app/res/values/styles.xml as well as capacitor-android/res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:background">@null</item>
    </style>


    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@drawable/splash</item>
    </style>
</resources>

Unfortunately, this one stops the app from launching altogether. There were many sources showing its application, but they were applied on direct Android Studio project built samples with AppCompatActivity in MainActivity.java, instead of BridgeActivity coming from capacitor in my MainActivity.java

My vue project itself is quite complex but the issue I have is not related to it, since if I start a fresh project terminal with npm init vue@latest to make fresh project and repeat my pipeline on that basic file same issues emerge on both status bar and action bar hide attempts. For anyone who might wanna look at the steps I do on my terminal here is all of them;

npm init vue@latest
cd projectfolder
npm install
--(alternative for capacitor staus-bar plugin)
npm install @capacitor/status-bar
npx cap sync
--
npm run build (generates dist folder)
npm install @capacitor/core
npm install @capacitor/cli --save-dev
npx cap init (give dist folder for www)
npm install @capacitor/android
npx cap add android
npx cap open android
then the rest is on android studio UI to edit MainActivity.java and style.xml in app/res/values/ and capacitor-android/res/values/

Any help with either, or help with correcting my development pipeline incase there is something wrong about the way I am trying to build, would be much appreciated!