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