Wondering what’s next for npm?Check out our public roadmap! »

    vue-google-signin-button

    1.0.4 • Public • Published

    vue-google-signin-button

    A simple Vue plugin to include a Google sign-in button into your web app.

    Screenshot

    Install

    This plugin can be installed as a module

    $ npm install vue-google-signin-button

    or, if you're not in a modular environment, just include it as a <script>.

    Usage

    Important: https://apis.google.com/js/api:client.js must be included as a <script> in your web app, as this plugin depends on it.

    Step 1: import and use the plugin if you're in a modular environment (you don't need this step otherwise, as the plugin will register itself).

    import GSignInButton from 'vue-google-signin-button'
    Vue.use(GSignInButton)

    Step 2: Now you have a g-signin-button global component, ready for use. It's best to demonstrate the usage with an example:

    <template>
      <g-signin-button
        :params="googleSignInParams"
        @success="onSignInSuccess"
        @error="onSignInError">
        Sign in with Google
      </g-signin-button>
    </template>
     
    <script>
    export default {
      data () {
        return {
          /**
           * The Auth2 parameters, as seen on
           * https://developers.google.com/identity/sign-in/web/reference#gapiauth2initparams.
           * As the very least, a valid client_id must present.
           * @type {Object} 
           */
          googleSignInParams: {
            client_id: 'YOUR_APP_CLIENT_ID.apps.googleusercontent.com'
          }
        }
      },
      methods: {
        onSignInSuccess (googleUser) {
          // `googleUser` is the GoogleUser object that represents the just-signed-in user.
          // See https://developers.google.com/identity/sign-in/web/reference#users
          const profile = googleUser.getBasicProfile() // etc etc
        },
        onSignInError (error) {
          // `error` contains any error occurred.
          console.log('OH NOES', error)
        }
      }
    }
    </script> 
     
    <style>
    .g-signin-button {
      /* This is where you control how the button looks. Be creative! */
      display: inline-block;
      padding: 4px 8px;
      border-radius: 3px;
      background-color: #3c82f7;
      color: #fff;
      box-shadow: 0 3px 0 #0f69ff;
    }
    </style> 

    That's it!

    Looking for the Facebook counterpart?

    License

    MIT © Phan An

    Install

    npm i vue-google-signin-button

    DownloadsWeekly Downloads

    1,798

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    326 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar