A Facebook Login button Single File Component done in VueJS

FacebookLogin.vue

<template>
  <div>
    <button class="button" @click="logInWithFacebook"> Login with Facebook</button>
  </div>
</template>
<script>
export default {
  name:"facebookLogin",
  methods: {

    async logInWithFacebook() {
      await this.loadFacebookSDK(document, "script", "facebook-jssdk");
      await this.initFacebook();
      window.FB.login(function(response) {
        if (response.authResponse) {
          alert("You are logged in &amp; cookie set!");
          // Now you can redirect the user or do an AJAX request to
          // a PHP script that grabs the signed request from the cookie.
        } else {
          alert("User cancelled login or did not fully authorize.");
        }
      });
      return false;
    },

    async initFacebook() {
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "8220179XXXXXXXXX", //You will need to change this
          cookie: true, // This is important, it's not enabled by default
          version: "v13.0"
        });
      };
    },

    async loadFacebookSDK(d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }
  }
};
</script>
<style>
.button{
  color:white;
  min-width: 150px;
  background-color: #000000a1;
  height: 2.5rem;
  border-radius: 2rem;
  font-weight: 400;
  font-size: 0.8rem;
}

</style>

@derekjj the idea is to only load the sdk if the user clicks "Login with Facebook", hence the example is not using the mounted event.

im gettting error when click button

Cannot read properties of undefined (reading 'login')
TypeError: Cannot read properties of undefined (reading 'login')
at Proxy.logInWithFacebook (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/components/FacebookLogin.vue?vue&type=script&lang=js:8:17)

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited:
okay, found the issue
you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },

@harithzainudin have you solved it ?? any one please tell me how to solve

yes, you can refer back to my edited answer above @asadmmn :)

im having the same issue like @asadmmn . cannot read properties of undefined... etc

edited: okay, found the issue you will need to return the promises

async loadFacebookSDK(d, s, id) {
      return new Promise((resolve, reject) => {
        let js,
          fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {
          return;
        }
        js = d.createElement(s);
        js.id = id;
        js.src = "https://connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
        js.onload = resolve;
        js.onerror = reject;
      });
    },
async initFacebook() {
      return new Promise((resolve) => {
        window.fbAsyncInit = function () {
          window.FB.init({
            appId: "your-app-id",
            cookie: true, // enable cookies to allow the server to access
            xfbml: true, // parse social plugins on this page
            version: "v16.0",
          });
          resolve();
        };
      });
    },