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!
⭐ 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
$ npm i @kevin_hws/vue-google-sign-in
$ yarn add @kevin_hws/vue-google-sign-in
$ pnpm i @kevin_hws/vue-google-sign-in
For Vue 2.7 or later, import vue directly like Vue3.
<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>
Prop | Type | default | information |
---|---|---|---|
clientId | String | (Required) - | Google API client ID. Follow the steps here to get your own client ID. |
buttonConfigs | Object | (Optional) { |
The button is rendered by GSI API. If you need more detail, please check it out on GsiButtonConfiguration |
- How to get my Google API client ID ?
- Please follow the steps here to setup Credential and OAuth Consent Screen