Skip to content
🔐 A simple Vue directive to include Google Sign-In Button behavior in any component
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
LICENSE
README.md Readme Facebook counterpart link Nov 25, 2018
index.js
package.json 1.0.2 Nov 23, 2018
screenshot.jpg first commit Nov 23, 2018

README.md

vue-google-signin-button-directive

🔐 A simple Vue directive to include Google Sign-In Button behavior in any component.

Screenshot

Install

$ npm install --save vue-google-signin-button-directive

Usage

Import the directive and attach it to any component, let's give you an example:

Important: OnGoogleAuthSuccess and OnGoogleAuthFail are mandatory methods you have to declare in your component where you are using the directive.

<template>
  <button v-google-signin-button="clientId" class="google-signin-button"> Continue with Google</button>
</template>

<script>
import GoogleSignInButton from 'vue-google-signin-button-directive'
export default {
  directives: {
    GoogleSignInButton
  },
  data: () => ({
    clientId: 'Your_Google_Client-Id'
  }),
  methods: {
    OnGoogleAuthSuccess (idToken) {
      // Receive the idToken and make your magic with the backend
    },
    OnGoogleAuthFail (error) {
      console.log(error)
    }
  }
}
</script>

<style>
.google-signin-button {
  color: white;
  background-color: red;
  height: 50px;
  font-size: 16px;
  border-radius: 10px;
  padding: 10px 20px 25px 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>

That's all.

Live example.

Looking for the Facebook counterpart?

License

MIT © Manuel Mejia Jr.

You can’t perform that action at this time.