How to call a library taken from CDN?

I’m trying to run Firebase on my Vue app without installing it with npm .

public/index.html* (before < /body >)

<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "...",
    measurementId: "..."
  };

  firebase.initializeApp(firebaseConfig);

  firebase.analytics();
</script>

views/Authorize.vue:

  mounted () {
    var provider = new firebase.auth.FacebookAuthProvider();

    firebase.auth().signInWithRedirect(provider);

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        var token = result.credential.accessToken;
      }

      var member = result.member;
    }).catch(function(error) {
      console.log(error)
    })
  }

But I get:

‘firebase’ is not defined

Can someone help me out, please?

Where do you get the undefined error? Only within the SFC? Have you tried accessing it through window? I assume the script would be added to the global scope.

window.firebase = firebase worked, thanks!

1 Like