how to implement Google Login API in VueJS?

data-onsuccess="onSignIn" is looking for a global onSignIn function. You need to put onSignIn outside of Vue component.

Another way is using gapi.signin2.render to render sign-in button, then you can use onSignIn inside Vue component:

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

export default {
  mounted() {
    gapi.signin2.render('google-signin-button', {
      onsuccess: this.onSignIn
  methods: {
    onSignIn (user) {
      const profile = user.getBasicProfile()

For more reference:

In case somebody needs a plugin to start working right away without too much setup, try this vue-google-signin-button-directive.

If someone is looking for a Vue 3 plugin for using the Google Identity Services to implement features like Sign In With Google, One-tap sign-up and Automatic sign-in, you can use the plugin vue3-google-login which I recently created for one of my project.

Here is a sample code to create a simple Google Sign In Button using vue3-google-login

First initialise the plugin in main.js with your Google API client ID

import { createApp } from 'vue'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'

const app = createApp(App)

app.use(vue3GoogleLogin, {


Then use GoogleLogin component like this

<script setup>
const callback = (response) => {
  console.log("Handle the response", response)

  <GoogleLogin :callback="callback"/>