JSFiddle - React, Tailwind, and code Playground

by An Phan

HTML

<script src="https://apis.google.com/js/api:client.js"></script>
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <g-signin-button @done="onUserLoggedIn"/>
</div>

CSS

.btn-sign-in {
  background: #fff;
  font: 16px/22px Roboto;
  padding: 4px 8px;
  border: 1px solid #ccc;
  display: inline-block;
  cursor: pointer;
}

JavaScript

Vue.component('g-signin-button', {
  template: '<div ref="signinBtn" class="btn-sign-in">Sign In</div>',
  mounted () {
    window.gapi.load('auth2', () => {
      const auth2 = window.gapi.auth2.init({
        client_id: 'YOUR-CLIENT-ID-HERE.apps.googleusercontent.com',
        cookiepolicy: 'single_host_origin'
      })
      auth2.attachClickHandler(this.$refs.signinBtn, {}, googleUser => {
        this.$emit('done', googleUser)
      }, error => console.log(error))
    })
  }
})

new Vue({
  el: '#app',
  methods: {
    onUserLoggedIn (user) {
      console.log(user)
    }
  }
})