'vue 2 [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored

I'm trying to put a google sign in button inside my Vue2 project, so I tried to follow the instructions here https://developers.google.com/identity/gsi/web/guides/display-button#html

So I put this code below into my Hello.vue component

<template>
  <section>
      <div id="g_id_onload"
         data-client_id="YOUR_GOOGLE_CLIENT_ID"
         data-callback=myCallbackFunction
         data-auto_prompt="false">
      </div>
      <div class="g_id_signin"
         data-type="standard"
         data-size="large"
         data-theme="outline"
         data-text="sign_in_with"
         data-shape="rectangular"
         data-logo_alignment="left">
      </div>
  </section>
</template>
<script>
  export default {      
    methods: {
      myCallbackFunction(){
      }
    }
  }
</script>

and when I reloaded my page/component, it will display the error [GSI_LOGGER]: The value of 'callback' is not a function. Configuration ignored.

I think the problem is data-callback couldn't find or recognize myCallbackFunction which I already declared under methods. I've also tried to put myCallbackFunction under computed instead, but it still return the same error. So is there any way I can make this work?

vue.jsgoogle-identity


Solution 1:[1]

Ok, I think I got it—but I switched from using the HTML documentation to the JavaScript documentation, since VueJS works better with this.

Still, I don't know if mounted is the best option, but it's at least working as intended.

Just use the callback function created at methods, and that's it.

  mounted: function () {
   google.accounts.id.initialize({
   client_id:
    'xxxxxxx.apps.googleusercontent.com',
     callback: this.handleCredentialResponse,
  })
  google.accounts.id.prompt()}

Solution 2:[2]

use globalThis.yourcallbackfunction

Solution 3:[3]

working for me in Vue 2

<template>
    <div>
        <div id="signin_button"></div>
    </div>
</template>

<script>

    export default {
        components: {

        },
        methods: {
            handleCredentialResponse(response) {
                console.log(response);
            }
        },
        mounted: function () {
            let googleScript = document.createElement('script');
            googleScript.src = 'https://accounts.google.com/gsi/client';
            document.head.appendChild(googleScript);
            
            window.addEventListener('load', () => {
                console.log(window.google);
                window.google.accounts.id.initialize({
                    client_id: "xxxxxxx.apps.googleusercontent.com",
                    callback: this.handleCredentialResponse
                });
                window.google.accounts.id.renderButton(
                    document.getElementById("signin_button"),
                    { theme: "outline", size: "large" }  // customization attributes
                );
            })
        }
    }
</script>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeremy Caney
Solution 2 minor
Solution 3 ImaDoofus

Related Questions