🎪 vue-google-sign-in

A simple Vue component for Sign in With Google.

If you are migrating from Google Sign-In JavaScript Platform Library, this might be a great decision for you. Just simply import this plugin as a component and pass your client id as a component prop, and then vue-google-sign-in would do all the stuff for you!

🚀 Features

⭐ Support Vue 2 (composition-api is required) and Vue 3.

⭐ Popup UX mode

⭐ Render sign in button which is built by Google (You could do a bit customization)

In progress:

🔸 One Tap UX mode

🔸 Render my custom button with slot

📥 Install

$ npm i @kevin_hws/vue-google-sign-in

$ yarn add @kevin_hws/vue-google-sign-in

$ pnpm i @kevin_hws/vue-google-sign-in

⚠️ When using with Vue 2.6 or older, @vue/composition-api is required separately.

For Vue 2.7 or later, import vue directly like Vue3.

🔖 Example

<script setup lang="ts">
    import VueGoogleSignInButton from "@kevin_hws/vue-google-sign-in";
    // Or you can import like this
    // import { VueGoogleSignInButton } from "@kevin_hws/vue-google-sign-in";

    // clientId: Your google client id it would looks like: XXXXXXXXXXXX.apps.googleusercontent.com
    const clientId: string = `YOUR_GOOGLE_CLIENT_ID`;
</script>

<template>
    <div>
        <VueGoogleSignInButton
            :client-id="clientId"
            :button-configs="{
                type: 'standard',
                theme: 'filled_black',
                size: 'large',
                text: 'signin_with',
                shape: 'pill',
                logo_alignment: 'left',
                width: '300',
                locale: 'en',
            }"
        />
    </div>
</template>

Props

Prop	Type	default	information
clientId	String	(Required) -	Google API client ID. Follow the steps here to get your own client ID.
buttonConfigs	Object	(Optional) { type: "standard", theme: "outline", size: "large", text: "signin", shape: "rectangular", logo_alignment: "left", width: "200", locale: "", }	The button is rendered by GSI API. If you need more detail, please check it out on GsiButtonConfiguration

❓ Q&A

• How to get my Google API client ID ?
  • Please follow the steps here to setup Credential and OAuth Consent Screen

📝 Reference

• Sign in With Google
• google/google-api-javascript-client