Vue 3 Google Login (OAuth) – Quick Setup with vue3-google-login

Ananthakrishnan Baji — Sat, 25 Apr 2026 21:18:25 +0000

Adding Google login in a Vue 3 app can quickly become messy with OAuth setup, SDK loading, and confusing docs.

Instead of handling everything manually, we’ll use a lightweight npm package — vue3-google-login — to get Google authentication working in minutes.

👉 npm: https://www.npmjs.com/package/vue3-google-login

⚙️ Prerequisites

You only need:

A Google Client ID

Get it from Google Cloud Console:

Create OAuth credentials
Add your domain (e.g. http://localhost:5173)

📦 Install

npm install vue3-google-login

This npm package simplifies Vue 3 Google Login and Google OAuth integration without dealing with Google SDK complexity.

⚡ Setup

Initialize plugin

import { createApp } from 'vue'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'

const app = createApp(App)

app.use(vue3GoogleLogin, {
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
})

app.mount('#app')

Add Google Login button

<script setup>
const callback = (response) => {
  // This callback will be triggered when the user selects or login to
  // his Google account from the popup
  console.log("Handle the response", response)
}
</script>

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

✅ That’s it — your Vue 3 Google Login is working.

🚀 Optional Enhancements

One Tap Login

<GoogleLogin :callback="callback" prompt />

Auto Login

<GoogleLogin :callback="callback" prompt autoLogin />

Custom Button (OAuth flow)

<script setup>
const callback = (response) => {
  console.log("Handle the response", response)
}
</script>

<template>
  <GoogleLogin :callback="callback">
    <button>Login Using Google</button>
  </GoogleLogin>
</template>

🔐 Backend Validation

Always verify the Google response on your backend before trusting the user.

🧠 Why use vue3-google-login?

No manual SDK handling
Clean Vue 3 integration
Supports Google OAuth + One Tap
Minimal setup
Developer-friendly

🔗 Resources

👉 npm: https://www.npmjs.com/package/vue3-google-login
📘 Docs: https://devbaji.github.io/vue3-google-login/
💻 GitHub: https://github.com/devbaji/vue3-google-login

If you’re building a Vue 3 app and need Google authentication, this package keeps things simple and production-ready.

DEV Community: Ananthakrishnan Baji