Add a Login with Google feature to your Vue 3 application using Google Identity Services
npm install vue3-google-login
src="https://devbaji.github.io/vue3-google-login/images/auto-login.gif"
width="300"
alt="Vue 3 Google Login - Automatic Google Sign In Demo"
>
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+.
- 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
š Full documentation available at: https://devbaji.github.io/vue3-google-login/
Install the vue3-google-login package using your preferred package manager:
NPM:
``sh`
npm install vue3-google-login
Yarn:
`sh`
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:
`html`
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:
`javascript
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.
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:
`vue
``
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/
- ā
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