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

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.