vue3-google-login

Vue 3 Google Login - Google Sign In for Vue 3

     

Overview

vue3-google-login is a lightweight, easy-to-use Vue 3 plugin for implementing Google Sign In and authentication in your Vue 3 applications. This package provides seamless integration with Google Identity Services and the Google 3P Authorization JavaScript Library, enabling you to add Google OAuth2 login functionality to your Vue 3 projects with minimal setup.

Perfect for Vue 3 developers looking for a simple solution to add Google login, Google signin, or Google OAuth2 authentication to their applications. Supports TypeScript and works with Vue 3.0.3+.

Features

• Login with Google button - Pre-styled Google sign-in button component
• One Tap prompt - Quick Google account selection for faster login
• Automatic Login - Seamless authentication without user interaction
• Custom Login Button - Use your own button design with Google authentication
• TypeScript Support - Full TypeScript definitions included
• Lightweight - Minimal bundle size, maximum performance

Documentation

📚 Full documentation available at: https://devbaji.github.io/vue3-google-login/

Quick Start - Vue 3 Google Login Setup

Installation

Install the vue3-google-login package using your preferred package manager:

NPM:

npm install vue3-google-login

Yarn:

yarn add vue3-google-login

CDN: If you prefer to use vue3-google-login via a CDN, you can include the following script in your HTML file:

<script src="https://cdn.jsdelivr.net/npm/vue3-google-login@2.0.36/dist/index.umd.min.js"></script>

Initialize the Plugin

Initialize the vue3-google-login plugin in your main.js or main.ts file. This will register the GoogleLogin component globally and configure Google OAuth2 authentication:

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')

💡 Tip: If you don't want to initialize and register the GoogleLogin component globally, you can directly import it from vue3-google-login package and use the client-id prop. Some functions also accept a clientId option to avoid initializing the plugin. See the full documentation for more details.

Using the GoogleLogin Component

Once the plugin is installed and initialized, you can use the GoogleLogin component anywhere in your Vue 3 application. This component renders a Google sign-in button that opens a popup for Google authentication:

<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>

Additional Features

This Vue 3 Google Login plugin supports many advanced features:

• One Tap Login - Show Google One Tap prompt for faster authentication
• Automatic Sign In - Auto-login users with a single Google account
• Custom Buttons - Create your own Google login button design
• OAuth2 Support - Full support for OAuth2 authorization code and access token flows
• Server-side Validation - Complete examples for validating credentials on your backend
• Nuxt 3 Support - Works seamlessly with Nuxt 3 applications
• TypeScript - Full TypeScript support with type definitions

📖 For complete documentation, examples, and advanced usage, visit: https://devbaji.github.io/vue3-google-login/

Why Choose vue3-google-login?

• ✅ Vue 3 Native - Built specifically for Vue 3 with Composition API support
• ✅ Lightweight - Minimal bundle size, no unnecessary dependencies
• ✅ Easy Integration - Simple setup, works out of the box
• ✅ TypeScript Ready - Full TypeScript support included
• ✅ Flexible - Support for custom buttons, One Tap, and automatic login
• ✅ Well Maintained - Active development and community support