Google API Client Library wrapper for Vue.js

by Vue.js Examples

VueGapi

Google API Client Library wrapper for Vue.js.

View Demo View Github

Installation

npm install --save vue-gapi

or

yarn add vue-gapi

Usage

Installing the plugin:

import Vue from 'vue'

// import the plugin
import VueGapi from 'vue-gapi'

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

  // works only with `ux_mode: "prompt"`
  refreshToken: true,
}

// Use the plugin and pass along the configuration
Vue.use(VueGapi, clientConfig)

exposes a $gapi member on the Vue instance:

<script>
  export default {
    name: 'my-component',

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

GitHub