VueGapi

A Google API client wrapper for Vue

Installation

npm install --save vue-gapi
or
yarn add vue-gapi

Usage

To connect to your app and load the APIs you need

import Vue from "vue";

// import the plugin
import VueGAPI from "vue-gapi";

// create the 'options' object
const apiConfig = {
  apiKey: "<YOUR_API_KEY>",
  clientId: "<YOUR_CLIENT_ID>.apps.googleusercontent.com",
  discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"],
  scope: "https://www.googleapis.com/auth/spreadsheets"
  // see all available scopes here: https://developers.google.com/identity/protocols/googlescopes'
};

// Use the plugin and pass along the configuration
Vue.use(VueGAPI, apiConfig);

Exposes the $getGapiClient on the Vue instance that returns a promise containing the initialised instance of the Google API client. See full list of options for apiConfig object here under gapi.auth2.SignInOptions

<script>

export default {
  name: 'my-component',

  methods: {
    login () {
      this.$getGapiClient()
        .then(gapi => {
          // gapi.sheets.spreadsheet.get(...)
          // ...
        })
    }
  },

}
</script>

Login

This will shortcut the login process

<script>
export default {
  name: 'login-shortcut',

  methods: {
    login () {
      this.$login()
    }
  }

}

</script>

Logout

This will shortcut the logout process

<script>
export default {
  name: 'logout-shortcut',

  methods: {
    logout () {
      this.$logout()
    }
  }

}

</script>

isAuthenticated

This will shortcut and check if your user is authenticated will return a boolean

<script>
export default {
  name: 'login-shortcut-check',

  methods: {
    login () {
      if (this.$isAuthenticated() !== true) {
        this.$login()
      }
    }
  }

}

</script>

isSignedIn

This will shortcut and check if your user is authenticated will return a boolean from google. and can be used inside v-if views.

<script>
export default {
  name: 'is-signed-in',

  computed: {
    isSignedIn () {
      return this.$isSignedIn()
    }
  }

}

</script>

refreshToken

This will shortcut getting a refresh token from Google, this should be placed in your App.vue on the created page and run on a timer of 45min

<script>
  name: 'App'

  created () {
  try {
    // NOTE: 45min refresh policy is what google recommends
    window.setInterval(this.$refreshToken(), 2.7e+6)
  } catch (e) {
    console.error(e)
  }

}
</script>