@kevin_hws/vue-google-sign-in v0.1.5

vue-google-sign-in

A simple Vue component for Sign in With Google. Just import the component and pass your client id as a component prop, and vue-google-sign-in would do all the stuff for you!

Now it Support

• popup UX mode

• Render official button which is built by Google (You could do a bit customization)

• 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

:warning: 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.

Props

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>

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