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:

<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>

For more reference: https://developers.google.com/identity/sign-in/web/build-button

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, {
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
})

app.mount('#app')

Then use GoogleLogin component like this

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

<template>
  <GoogleLogin :callback="callback"/>
</template>