下面是我用来处理我自己的Firebase插件的类似方法。注意：确保使用firebase库的页面已禁用ssr
~/plugins/firebase-plugin.ts

import { FirebaseOptions, initializeApp } from "firebase/app";
import {
  FacebookAuthProvider,
  GoogleAuthProvider,
  PopupRedirectResolver,
  getAuth,
  signInWithEmailAndPassword,
  signInWithPopup,
} from "firebase/auth";

export default defineNuxtPlugin((nuxtApp) => {
  if (process.client) {
    const app = initializeApp(firebaseConfig as FirebaseOptions);
    const auth = getAuth(app);

    const googleAuth = new GoogleAuthProvider();
    const facebookAuth = new FacebookAuthProvider();

    return {
      provide: {
        firebase: {
          app,
          auth,

          signInWithEmailAndPassword: async (email: string, password: string) =>
            signInWithEmailAndPassword(auth, email, password),

          signInWithGoogle: async (
            resolver?: PopupRedirectResolver | undefined
          ) => signInWithPopup(auth, googleAuth),

          signInWithFacebook: async (
            resolver?: PopupRedirectResolver | undefined
          ) => signInWithPopup(auth, facebookAuth),
          // ...
        },
      },
    };
  }
});

您可以创建一个可组合对象，以便在客户端呈现的页面上的任何位置公开它
~/composables/useFirebase.ts

export function useFirebase() {
  const { $firebase } = useNuxtApp();

  return {
    ...$firebase,
  };
}