Get Started

vue3-google-signin wraps Google Identity Services (GIS), the library behind Sign in with Google. It gives you Google’s button as a Vue component, and One Tap and the two OAuth2 flows as composables. It works in any Vue 3 app, and in Nuxt 3 and 4 through the nuxt-vue3-google-signin module.

Pick what you’re building

You want to	Use	You get
Sign users in	GoogleSignInButton	An ID token that says who the user is
Sign users in without a trip to a login page	useOneTap	An ID token
Sign users in with a button in your own design	useTokenClient or useCodeClient	An access token or a code
Read the user’s Calendar, Drive, … in the browser	useTokenClient	An access token that lasts about an hour
Call Google APIs from your server	useCodeClient	A code your server exchanges for tokens

Each row links to its guide. Whichever you pick, the steps below are the same.

Create a client ID

1. Open Credentials in the Google Cloud console, and pick or create a project. If the console asks you to configure the consent screen first, give it your app’s name and a support email.

2. Click Create credentials > OAuth client ID and choose Web application.

3. Under Authorized JavaScript origins, add every origin your app runs on, with its port. For local development add both http://localhost and the dev server’s origin: http://localhost:5173 for Vite, http://localhost:3000 for Nuxt.

4. Copy the client ID. It ends in .apps.googleusercontent.com. It isn’t a secret: it ships to the browser.

Tip

Changes to the origins can take a few minutes to apply. If a popup fails with redirect_uri_mismatch, add the same origin under Authorized redirect URIs too.

Install

Vue

Install the package with your package manager:

npm install vue3-google-signin

Register the plugin in your entry point. Keep the client ID in an environment variable so each environment can use its own:

src/main.ts

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

createApp(App)
  .use(GoogleSignInPlugin, {
    clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID,
  })
  .mount("#app");

.env

VITE_GOOGLE_CLIENT_ID=1234567890-abc.apps.googleusercontent.com

Nuxt

Add the module. nuxi installs it and adds it to modules in nuxt.config.ts:

npx nuxi@latest module add nuxt-vue3-google-signin

Give it your client ID. The module stores it in Nuxt’s runtime config, which reads this variable from .env in development and from the environment when the server starts:

.env

NUXT_PUBLIC_GOOGLE_SIGN_IN_CLIENT_ID=1234567890-abc.apps.googleusercontent.com

Or set it in nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-vue3-google-signin"],
  googleSignIn: {
    clientId: "1234567890-abc.apps.googleusercontent.com",
  },
});

Add a sign-in button

Vue

src/components/SignIn.vue

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

const onSuccess = ({ credential }: CredentialSuccessResponse) => {
  // An ID token (JWT). Send it to your server and verify it there.
  console.log(credential);
};
</script>

<template>
  <GoogleSignInButton @success="onSuccess" />
</template>

The plugin also registers GoogleSignInButton globally, so the import is only there for your editor.

Nuxt

pages/login.vue

<script setup lang="ts">
import type { CredentialSuccessResponse } from "nuxt-vue3-google-signin";

const onSuccess = ({ credential }: CredentialSuccessResponse) => {
  // An ID token (JWT). Send it to your server and verify it there.
  console.log(credential);
};
</script>

<template>
  <GoogleSignInButton @success="onSuccess" />
</template>

GoogleSignInButton, the composables and the helpers are auto-imported. Import types from nuxt-vue3-google-signin.

Start your dev server and open the page. Google draws its button; sign in and the ID token shows up in the console.

Next steps

• Verify users on your server: check the ID token and start a session. Don’t trust the token until you have.
• Using with Nuxt: runtime config, server-side rendering, protected pages and a client ID per domain.
• Sign in with One Tap: Google’s prompt for signed-out visitors, on any page.
• Call Google APIs: ask for Calendar, Drive or Gmail access.
• Set the client ID at runtime: load it from your server, or use one per tenant.