Trouble initialising Firebase

I’m (pretty new to Vue & composition API and Ionic6 :grimacing:but I am …) trying to get Push notifications working (on Android initially) with Ionic & Vue, following Using Push Notifications with Firebase in an Ionic + Angular App - but trying to translate to work in Vue - but my app’s just crashing. I can see this in the Android Studio logs:

2022-04-07 22:58:16.218 5432-5657/uk.co.—.— E/AndroidRuntime: FATAL EXCEPTION: CapacitorPlugins
Process: uk.co.—.—, PID: 5432
java.lang.RuntimeException: java.lang.reflect.InvocationTargetException
at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:601)
at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:214)
at android.os.HandlerThread.run(HandlerThread.java:67)
Caused by: java.lang.reflect.InvocationTargetException
at java.lang.reflect.Method.invoke(Native Method)
at com.getcapacitor.PluginHandle.invoke(PluginHandle.java:121)
at com.getcapacitor.Bridge.lambda$callPluginMethod$0$com-getcapacitor-Bridge(Bridge.java:592)
at com.getcapacitor.Bridge$$ExternalSyntheticLambda5.run(Unknown Source:8)
at android.os.Handler.handleCallback(Handler.java:883)
at android.os.Handler.dispatchMessage(Handler.java:100)
at android.os.Looper.loop(Looper.java:214)
at android.os.HandlerThread.run(HandlerThread.java:67)
Caused by: java.lang.IllegalStateException: Default FirebaseApp is not initialized in this process uk.co.—.—. Make sure to call FirebaseApp.initializeApp(Context) first.
at com.google.firebase.FirebaseApp.getInstance(FirebaseApp.java:183)
at com.google.firebase.messaging.FirebaseMessaging.getInstance(com.google.firebase:firebase-messaging@@21.0.1:1)
at com.capacitorjs.plugins.pushnotifications.PushNotificationsPlugin.register(PushNotificationsPlugin.java:82)

I’ve installed @capacitor/push-notifications, ran npx cap sync

This is my App.vue:

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { defineComponent } from 'vue';
import {
  ActionPerformed,
  PushNotificationSchema,
  PushNotifications,
  Token,
} from '@capacitor/push-notifications';

export default defineComponent({
  name: 'App',
  components: {
    IonApp,
    IonRouterOutlet
  },
  beforeMount() {
    // Request permission to use push notifications
    // iOS will prompt user and return if they granted permission or not
    // Android will just grant without prompting
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        // Register with Apple / Google to receive push via APNS/FCM
        PushNotifications.register();
      } else {
        // Show some error
      }
    });

    // On success, we should be able to receive notifications
    PushNotifications.addListener('registration',
        (token: Token) => {
          alert('Push registration success, token: ' + token.value);
        }
    );

    // Some issue with our setup and push will not work
    PushNotifications.addListener('registrationError',
        (error: any) => {
          alert('Error on registration: ' + JSON.stringify(error));
        }
    );

    // Show us the notification payload if the app is open on our device
    PushNotifications.addListener('pushNotificationReceived',
        (notification: PushNotificationSchema) => {
          alert('Push received: ' + JSON.stringify(notification));
        }
    );

    // Method called when tapping on a notification
    PushNotifications.addListener('pushNotificationActionPerformed',
        (notification: ActionPerformed) => {
          alert('Push action performed: ' + JSON.stringify(notification));
        }
    );
  }
});
</script>

I guess from “Make sure to call FirebaseApp.initializeApp(Context) first” I am not initialising things correctly… but am stuck on how I should be doing it…

Any ideas please? Many thanks!

Using:
Ionic 6.18.1
node v17.4.0
npm 9.3.1

And from package.json dependencies:
@capacitor-community/fcm”: “^2.0.2”,
@capacitor/android”: “3.4.0”,
@capacitor/app”: “^1.1.0”,
@capacitor/browser”: “^1.0.7”,
@capacitor/core”: “^3.4.0”,
@capacitor/haptics”: “1.1.4”,
@capacitor/keyboard”: “1.2.1”,
@capacitor/push-notifications”: “^1.0.9”,
@capacitor/status-bar”: “1.0.7”,
@capacitor/storage”: “^1.2.5”,
@ionic/vue”: “^6.0.0”,
@ionic/vue-router”: “^6.0.0”,
“axios”: “^0.26.0”,
“core-js”: “^3.6.5”,
“vue”: “^3.2.21”,
“vue-router”: “^4.0.12”,
“vuex”: “^4.0.2”

Did you integrate Firebase with the Android app? It works for me…