vue-google-signin-button-directive
🔐 A simple Vue directive to include Google Sign-In Button behavior in any component.
Install
$ npm install --save vue-google-signin-button-directive $ yarn add vue-google-signin-button-directiveUsage
Import the directive and attach it to any component, let's give you an example:
Important:
OnGoogleAuthSuccessandOnGoogleAuthFailare 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.
Looking for the Facebook counterpart?
License
MIT © Manuel Mejia Jr.
