@kevin_hws/vue-google-sign-in
v0.1.5
Published
Google Sign-In for Vue.js
Downloads
11
Maintainers
Readme
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
[x] popup UX mode
[x] 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
| 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 |
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