Nuxt module for Vue 3 Google Login

   

Nuxt 3 module for vue3-google-login — zero-config Google OAuth integration with auto-imported components and utility functions.

Features

• Zero imports — <GoogleLogin> component and all utility functions are auto-imported
• SSR safe — plugin runs only on the client (the Google GSI script is browser-only)
• TypeScript — full type support for module options and utility functions
• One Tap — easily trigger Google One Tap prompt
• Flexible — supports auth code, token, and credential (JWT) flows

Quick Setup

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

That's it! The command installs the package and adds it to your nuxt.config.ts.

Configuration

Add your Google Client ID to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['nuxt-vue3-google-login'],

  googleLogin: {
    clientId: 'YOUR_GOOGLE_CLIENT_ID.apps.googleusercontent.com',
  },
})

You can also use an environment variable:

export default defineNuxtConfig({
  modules: ['nuxt-vue3-google-login'],

  googleLogin: {
    clientId: process.env.GOOGLE_CLIENT_ID,
  },
})

All Options

Option	Type	Default	Description
clientId	string	''	Your Google OAuth Client ID (required)
prompt	boolean	false	Show One Tap prompt automatically on page load
autoLogin	boolean	false	Enable automatic login (auto_select in GSI)
popupType	'CODE' | 'TOKEN'	'CODE'	OAuth popup return type
idConfiguration	object | null	null	Fine-grained GSI IdConfiguration overrides (serializable fields only)
buttonConfig	object	{}	Google button appearance options

Usage

<GoogleLogin> Component

The component is globally available — no import needed:

<template>
  <GoogleLogin :callback="onSuccess" />
</template>

<script setup lang="ts">
import type { CallbackTypes } from 'vue3-google-login'

function onSuccess(response: CallbackTypes.CredentialPopupResponse) {
  // decodeCredential is auto-imported
  const user = decodeCredential(response.credential)
  console.log(user) // { name, email, picture, sub, ... }
}
</script>

One Tap

<script setup lang="ts">
// googleOneTap is auto-imported
const response = await googleOneTap()
const user = decodeCredential(response.credential)
</script>

Auth Code Flow

<script setup lang="ts">
// googleAuthCodeLogin is auto-imported
async function login() {
  const { code } = await googleAuthCodeLogin()
  // Send `code` to your server to exchange for tokens
}
</script>

Token Flow

<script setup lang="ts">
// googleTokenLogin is auto-imported
async function login() {
  const { access_token } = await googleTokenLogin()
}
</script>

Sign Out

<script setup lang="ts">
// googleLogout is auto-imported
function signOut() {
  googleLogout()
}
</script>

Low-level SDK Access

<script setup lang="ts">
// googleSdkLoaded is auto-imported
googleSdkLoaded((google) => {
  google.accounts.id.prompt()
})
</script>

Auto-imported Utilities & Composables

All functions and composables from vue3-google-login are available without any import statement:

Name	Type	Description
useGoogleSdk()	Composable	Returns { isLoaded } — reactive boolean, true once the GSI SDK is ready
decodeCredential(token)	Function	Decode a Google JWT credential into a user object
googleOneTap(options?)	Function	Show the One Tap prompt
googleLogout()	Function	Disable auto-select / sign out
googleTokenLogin(options?)	Function	Trigger OAuth popup returning an access token
googleAuthCodeLogin(options?)	Function	Trigger OAuth popup returning an auth code
googleSdkLoaded(callback)	Function	Run code once the Google GSI SDK is ready

useGoogleSdk example

Useful when building a custom button — keeps it disabled until the SDK is ready:

<template>
  <button :disabled="!isLoaded" @click="login">
    Sign in with Google
  </button>
</template>

<script setup lang="ts">
const { isLoaded } = useGoogleSdk()

async function login() {
  const { code } = await googleAuthCodeLogin()
  // exchange code on your server
}
</script>

Full Documentation

This module is a Nuxt wrapper for vue3-google-login. For the complete API reference — including all component props, callback types, GSI configuration options, and advanced usage — see the full documentation:

devbaji.github.io/vue3-google-login

Notes

• callback and error in module options — these are function types that cannot be serialized into runtimeConfig. Pass callback as a prop on <GoogleLogin :callback="...">, or use googleOneTap({ callback: ... }) for One Tap.
• idConfiguration function fields — callback and native_callback inside idConfiguration are also excluded for the same reason. Use googleSdkLoaded to set them programmatically if needed.

Contributing

# Clone the repo
git clone https://github.com/devbaji/nuxt-vue3-google-login.git
cd nuxt-vue3-google-login

# Install dependencies
npm install

# Start playground dev server
GOOGLE_CLIENT_ID=your-client-id npm run dev

# Build the module
npm run prepack

License

MIT — Baji