Skip to content
Vue3 Google Sign-in
GitHub

Google sign-in for Vue 3.

Google's sign-in button, One Tap and OAuth2 token and code flows, as one Vue component and three composables.

pnpm add vue3-google-signin
Get StartedView on GitHub

  1. Your Vue app

    <GoogleSignInButton @success="onSuccess"/>
  2. user clicks

  3. Google

  4. onSuccess({ credential })

  5. ID token

    eyJhbGciOiJSUzI1NiIsImtpZCI6….eyJpc3MiOiJhY2NvdW50cy5nb29nbGU….c2lnbmF0dXJl…
  6. decodeCredential()

  7. Signed in

How sign-in works

Section titled “How sign-in works”

Google runs the account picker and consent screens. Your app gets a token and decides what to do with it.

  1. 1

    Your app shows the button

    GoogleSignInButton renders it, or useOneTap shows Google's prompt. Google's script loads once.

  2. 2

    The user picks an account

    In Google's own window, so passwords never touch your app.

  3. 3

    Your callback gets a token

    An ID token that says who signed in, or an access token or code for Google APIs.

  4. 4

    Your server verifies it

    Check the token's signature with Google's public keys, then start a session.

Pick how users sign in

Section titled “Pick how users sign in”

Follow the questions to the flow that fits, then compare its code and what your app gets back. Each one is a few lines of Vue.

What do you need from Google?

To know who the user is

To call Google APIs

When they click

On its own

In the browser

On your server

Google's own button. Users pick an account and you get an ID token that says who they are.

LoginButton.vue
<script setup>
import { ref } from "vue";
import {
  GoogleSignInButton,
  decodeCredential,
} from "vue3-google-signin";


const user = ref(null);
const onSuccess = ({ credential }) => {
  user.value = decodeCredential(credential);
};
</script>


<template>
  <GoogleSignInButton @success="onSuccess" />
  <p v-if="user">Signed in as {{ user.email }}</p>
</template>

@success receives

This button is live. Sign in to see the token your app receives.

Example ID token headerpayloadsignature
eyJhbGciOiJSUzI1NiIsImtpZCI6ImV4YW1wbGUiLCJ0….eyJpc3MiOiJodHRwczovL2FjY291bnRzLmdvb2dsZS5j….ZXhhbXBsZS1zaWduYXR1cmUtbm90LWEtcmVhbC1vbmU
name
Ada Lovelace
email
ada@example.com verified
sub
110248495921238986420

Decoded in your browser with decodeCredential(). Nothing is sent to a server.

Decode it for the user's name, email and picture, and verify it on your server. Button guide

Built for real apps

Section titled “Built for real apps”

It handles the parts around Google’s script, so your own code stays small.

Works with Nuxt and SSR

Components render on the server. Google's script loads once the page reaches the browser, then isReady turns true.

Small

4.3 kB gzipped, about 4% of Google's own script. Vue is the only peer dependency.

Typed callbacks

Options and responses are typed, so your editor lists the fields.

Dynamic, multi-tenant client IDs

Set the client ID from your server, switch it per tenant, or give each component its own. See how

Knows when the popup closes

onNonOAuthError tells you, so you can re-enable your button.

Used by

Section titled “Used by”

Projects like these sign users in with it, along with hundreds more on GitHub. Using it too? Add yours.

npm downloads a month

57.9K

in September 2026, both packages together

  • vue3-google-signin
  • nuxt-vue3-google-signin
GitHub stars

187

since July 2022

Repositories on GitHub that depend on it

545

plus 299 through the Nuxt module

Show the numbers
npm downloads by month
Monthvue3-google-signinNuxt moduleTotal
October 202535,62319,64655,269
November 202532,93618,36851,304
December 202533,44918,51351,962
January 202632,30215,99748,299
February 202634,30815,93350,241
March 202643,41621,37364,789
April 202642,25019,45361,703
May 202637,11318,20855,321
June 202636,98918,31555,304
July 202636,15416,62752,781
August 202634,73216,77951,511
September 202639,44318,42457,867
GitHub stars at the end of each month
MonthStars
July 202229
August 202239
September 202243
October 202245
November 202250
December 202251
January 202361
February 202365
March 202373
April 202378
May 202379
June 202382
July 202386
August 202388
September 202393
October 2023100
November 2023103
December 2023107
January 2024113
February 2024117
March 2024125
April 2024127
May 2024131
June 2024132
July 2024139
August 2024144
September 2024149
October 2024154
November 2024158
December 2024161
January 2025165
February 2025167
March 2025168
April 2025173
May 2025173
June 2025175
July 2025176
August 2025176
September 2025179
October 2025181
November 2025184
December 2025185
January 2026185
February 2026185
March 2026185
April 2026186
May 2026186
June 2026187
July 2026187
August 2026187
September 2026187
October 2026187

Get started

Section titled “Get started”

  1. Install the package

    pnpm add vue3-google-signin

  2. Register the plugin

    main.ts
    import { createApp } from "vue";
    import GoogleSignInPlugin from "vue3-google-signin";
    import App from "./App.vue";
    

    createApp(App)
      .use(GoogleSignInPlugin, {
        clientId: "YOUR_CLIENT_ID.apps.googleusercontent.com",
      })
      .mount("#app");

  3. Add a flow

    Drop in GoogleSignInButton or one of the composables from the flows above, then follow the guide for your setup.