Skip to content
Vue3 Google Sign-in

GoogleSignInButton

GoogleSignInButton renders Google’s own Sign in with Google button. The plugin registers it globally, and you can also import it from vue3-google-signin.

<GoogleSignInButton theme="filled_black" shape="pill" @success="onSuccess" />

Playground

Section titled “Playground”

Change the props and the button re-renders. It’s the real button, so you can sign in with it too.

This is Google's real button. Change it below.

Theme
Size
Shape
Text
Type
Logo
<GoogleSignInButton @success="onSuccess" />

Props

Section titled “Props”

Every prop is optional.

Appearance

Section titled “Appearance”
typedefault "standard"
"standard""icon"A full button with text, or only the Google logo.Google reference
themedefault "outline"
"outline""filled_blue""filled_black"The button's colors.Google reference
sizedefault "large"
"large""medium""small"Height of the button: 40, 32 or 20px.Google reference
textdefault "signin_with"
"signin_with""signup_with""continue_with""signin"The label: Sign in with Google, Sign up with Google, Continue with Google, or Sign in.Google reference
shapedefault "rectangular"
"rectangular""pill""circle""square"Corner style. Use circle or square with the icon type.Google reference
logo-alignmentdefault "left"
"left""center"Where the Google logo sits in a standard button.Google reference
width
numberMinimum width in pixels, up to 400.Google reference
locale
stringLanguage of the button text, such as en or fr. Defaults to the browser's or the Google account's language.Google reference

Sign-in

Section titled “Sign-in”
client-id
stringClient ID for this button. Overrides the plugin's.
ux-modedefault "popup"
"popup""redirect"Open Google in a popup, or redirect the whole page.Google reference
login-uri
stringYour endpoint that receives the credential in redirect mode.Google reference
nonce
stringA random string Google puts in the ID token, to prevent replay attacks.Google reference
login-hint
stringSkip account selection for a known user: their email address or ID token sub.Google reference
hd
stringLimit accounts to a Google Workspace domain, or * for any.Google reference
state
stringReturned in the credential response, to tell several buttons apart.Google reference
use-fedcm-for-buttondefault false
booleanUse the browser's FedCM sign-in flow where it's supported.Google reference
button-auto-selectdefault false
booleanWith FedCM, sign returning users in without the account chooser.Google reference
essential-claims
stringExtra claims for the ID token, such as "auth_time, amr".Google reference

One Tap

Section titled “One Tap”

These apply with one-tap, which also shows Google’s One Tap prompt while the button is on the page.

one-tapdefault false
booleanAlso show Google's One Tap prompt while the button is on the page.
auto-selectdefault false
booleanSign returning users in without a tap when only one Google session has approved your app.Google reference
cancel-on-tap-outsidedefault true
booleanClose the prompt when the user clicks outside it.Google reference
contextdefault "signin"
"signin""signup""use"Changes the wording of the prompt.Google reference
prompt-parent-id
stringDOM ID of the element to show the prompt in.Google reference
color-scheme
"default""light""dark"Color scheme of the prompt. Defaults to the system setting.Google reference
itp-support
booleanThe upgraded One Tap UX on browsers with Intelligent Tracking Prevention.Google reference
allowed-parent-origin
stringstring[]Origins allowed to embed One Tap in an intermediate iframe.Google reference

Events

Section titled “Events”
@success
CredentialSuccessResponseGoogle returned an ID token in credential. Decode it with decodeCredential and verify it on your server.Google reference
@error
CredentialResponseGoogle responded without a credential.Google reference
@prompt-moment-notification
PromptMomentNotificationWith one-tap: the prompt was displayed, skipped or dismissed.Google reference
@native-callback
{ id: string; password: string }The user picked a password saved in the browser.Google reference
@intermediate-iframe-close-callback
The user closed One Tap in intermediate iframe mode.Google reference