Google Sign-in Button

Adding Google Sign-in button anywhere can be done using the provided GoogleSignInButton component imported from vue3-google-signin. This button is rendered by google using their branding guidelines.

TIP

💡 This component is also globally availiable with GoogleSignInButton after plugin initialization.

INFO

If you want a custom button go to the following page

Using Google Sign In button

To use the button we can simply import it or use global component as per in above. For better IDE support we are going to import it.

<script setup lang="ts">
import {
  GoogleSignInButton,
  type CredentialResponse,
} from "vue3-google-signin";

// handle success event
const handleLoginSuccess = (response: CredentialResponse) => {
  const { credential } = response;
  console.log("Access Token", credential);
};

// handle an error event
const handleLoginError = () => {
  console.error("Login failed");
};
</script>

<template>
  <GoogleSignInButton
    @success="handleLoginSuccess"
    @error="handleLoginError"
  ></GoogleSignInButton>
</template>

And the result is the following button rendered on your page.

You can checkout the console for the output.

TIP

💡 If you have a weird white box around the button generated by Google, thats propbably due to a conflict with color scheme. To overcome this apply color-scheme: auto CSS attribute button container.