Vue 3 Google Login
Overview
This is a lightweight plugin to implement log-in and sign-up flows using Google Identity Services with the help of Google 3P Authorization JavaScript Library
This allows you to implement the following features
- Login with Google button
- Login using One Tap prompt
- Automatic Login without any user interaction
- Login with Google using a custom button
Documentation
https://yobaji.github.io/vue3-google-login/
Basic Setup
Installation
First step is to install it using npm
npm install vue3-google-login
Or using yarn
yarn add vue3-google-login
Initialize the plugin
Initialize the vue3-google-login plugin in main.js, this will register a component GoogleLogin
globally
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')
💡 If you dont want to initialize and registerGoogleLogin
component, you can directly import this fromvue3-google-login
package and use the client-id prop, also some functions accepts a clientId option which can be used to avoid initialising the plugin, see here for more info
GoogleLogin component
Once the plugin is installed you can use the component GoogleLogin
anywhere in your project, this will render a log in button which opens a popup for Google login
<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>
docs
For more advanced usages see the