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


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



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


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.

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

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

.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);

That's all.

Live example.

Looking for the Facebook counterpart?


MIT © Manuel Mejia Jr.

You can’t perform that action at this time.