SSR Issues with api-loading class

[LeCoupa]

It looks like the api-loading class is added on the GoogleLogin button on client-side when we reload the page. This prevent to click on the button. I am using 2.0.20.

🎥 Here is a video to show you.

👨‍💻 Code of the component

```vue ```

PS: Thanks a lot for your package, it's very complete and the one-page doc is very nice to read!

[devbaji]

@LeCoupa Love to hear that the package was helpful for you. The issue you mentioned looks strange, the class api-loading was supposed to be remove once the library is loaded (https://accounts.google.com/gsi/client). Can you check if there is any console errors? Its working fine on my apps.

[Monster0313]

Hello @devbaji , I've encountered the same issue as @LeCoupa , and I'm using it in the way shown in the code below, without introducing any other packages. I'm using version 2.0.20 and developing with Nuxt 3. There are no errors displayed in the console, and the button works fine as long as I remove the .api-loading class.

<template>
  <div class="w-full h-[50vh] flex justify-center items-end">
    <v-card title="login system" width="400">
      <div class="m-4">
        <GoogleLogin
          :client-id="'<client id>'"
          :callback="handleGoogleResponse"
        />
      </div>
    </v-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { GoogleLogin } from 'vue3-google-login'

export default defineComponent({
  components: {
    GoogleLogin
  },
  setup() {
    const handleGoogleResponse = (response: any) => {
      if (response) {
        console.log(response)
      }
    }
    return {
      handleGoogleResponse
    }
  }
})

[devbaji]

@Monster0313 @LeCoupa Removing this 'api-loading' class from version 2.0.21 onwards. Please update the plugin to latest one.

[LeCoupa]

@devbaji thank you it's working. I am closing the issue. How can we sponsor you?

[devbaji]

@LeCoupa Since you asked I just added donate buttons on the doc page. Buy Me A Coffee PayPal