Sometimes, we want to implement Google Login API in Vue.js.

In this article, we’ll look at how to implement Google Login API in Vue.js.

How to implement Google Login API in Vue.js?

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.

For instance, we write

<template>
  <div id="google-signin-button"></div>
</template>

<script>
//...
export default {
  mounted() {
    gapi.signin2.render("google-signin-button", {
      onsuccess: this.onSignIn,
    });
  },
  methods: {
    onSignIn(user) {
      const profile = user.getBasicProfile();
    },
  },
};
</script>

to call gapi.signin2.render to render the sign in page contents in the div with ID google-signin-button.

We set onsuccess to this.onSignIn to call it when sign in is successful.

Conclusion

To implement Google Login API in Vue.js, we can use the gap.signin2.render method.