VueGapi

Google API Client Library wrapper for Vue.js

⚠️ Deprecation

The Google Sign-In JavaScript Platform Library is deprecated and will be fully retired on March 31, 2023. This plugin will not be receiving new features.

We would encourage you to migrate your application to Vue3 Google Sign-in which exposes a number of Vue 3 composables built on the new Google Identity Services library.

Requirements

Version 2 requires Vue 3.

If you are looking for a Vue 2 compatible version, use Version 1.

Installation

npm install vue-gapi

Usage

Install the plugin with gapi.client.init configuration parameters:

import { createApp } from 'vue'
import VueGapi from 'vue-gapi'

const app = createApp({})

app.use(VueGapi, {
  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',
})

Composition API

Inject the GoogleAuthService instance via useGapi:

import { useGapi } from 'vue-gapi'

export default {
  setup() {
    const gapi = useGapi()

    function login() {
      gapi.login().then(({ currentUser, gapi, hasGrantedScopes }) => {
        console.log({ currentUser, gapi, hasGrantedScopes })
      })
    }

    return { login }
  },
}

Options API

Reference the $gapi global property accessible inside the application:

export default {
  methods: {
    login() {
      this.$gapi.login().then(({ currentUser, gapi, hasGrantedScopes }) => {
        console.log({ currentUser, gapi, hasGrantedScopes })
      })
    },
  },
}