将firebaseui CDN与nuxt.js集成，firebase未定义错误

Question

I'm working on integrating localized firebaseui with nuxt.js (ssr). But I run into a "firebase is not defined" error. I'm new to ssr and nuxt.js, I truly hope anyone could explain why this setup doesn't work. Any help is appreciated!

firebaseui instruction: https://github.com/firebase/firebaseui-web#localized-widget

nuxt.config.js (part of related)

plugins: [{ src: "~/plugins/firebase.js" }],

plugins/firebase.js

import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";

if (!firebase.apps.length) {
  firebase.initializeApp(process.env.firebaseConfig);
}

export const authProviders = {
  Google: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
  Email: firebase.auth.EmailAuthProvider.PROVIDER_ID
};
export const firestore = firebase.firestore();
export const fireAuth = firebase.auth();
export default firebase;

pages/Login.vue

<template>
  <no-ssr>
    <div class="login">
      <div id="firebaseui-auth-container"></div>
    </div>
  </no-ssr>
</template>

<script>
import firebase, { fireAuth, authProviders } from "~/plugins/firebase";

export default {
  name: "Login",
  head() {
    return {
      title: "Login",
      script: [
        {
          src: 'https://www.gstatic.com/firebasejs/ui/4.1.0/firebase-ui-auth__en.js'
        }
      ],
      link: [
        {
          rel: "stylesheet",
          href: "https://cdn.firebase.com/libs/firebaseui/4.1.0/firebaseui.css"
        }
      ]
    };
  },
  mounted() {

    var checkFirebaseUi = setInterval(function() {

      if (window.firebaseui) {
        clearInterval(checkFirebaseUi);

        const firebaseui = window.firebaseui;


        console.log(firebase) // this line works

        // error comes from here
        // the code from firebaseui cdn return firebase not definded
        // but it's clearly accessible    
        const ui =
          firebaseui.auth.AuthUI.getInstance() ||
          new firebaseui.auth.AuthUI(fireAuth);

        ui.start("#firebaseui-auth-container", {
          credentialHelper: firebaseui.auth.CredentialHelper.NONE,
          signInOptions: [authProviders.Google, authProviders.Email],
          signInFlow: "popup",
          tosUrl: "/tos",
          privacyPolicyUrl: "/privacy-policy",
          callbacks: {
            signInSuccessWithAuthResult: this.signInResult
          }
        });
      }
    }, 100);

  }
};
</script>

When I open login page, error returns:

Uncaught ReferenceError: firebase is not defined at new qo (firebase-ui-auth__en.js:formatted:10762) at login.js:59

Answer 1

It worked after I add this in /pages/Login.vue

beforeMount() {
  window.firebase = firebase;
},

I suppose firebaseui cdn require firebase object from window object. I wonder is this the nature of external resources work for frontend? Any idea?