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://devbaji.github.io/vue3-google-login/

Basic Setup

Installation

Installation via NPM

npm install vue3-google-login

Installation via Yarn

yarn add vue3-google-login

Installation via 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.31/dist/index.umd.min.js"></script>

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 register GoogleLogin component, you can directly import this from vue3-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>

For more advanced usages see the docs