How to configure VueGapi as global in Vue 3 App

Question

I'm trying to use the VueGapi plugin for a gmail app in Vue. Here is my main.js

import { createApp } from 'vue'
import App from './App.vue'
import VueGapi from 'vue-gapi'

const app = createApp(App).mount('#app')

app.use(VueGapi, {
  apiKey: 'my_key',
  clientId: 'my_client_id',
  discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
  scope: 'https://www.googleapis.com/auth/spreadsheets',
})

When I try and reference it with this.$gapi I get the Uncaught TypeError: this.$gapi is undefined

A little new to Vue so any help would be appreciated!

Answer 1

The .mount function does not return a vue app, that's why you can"t make a use after.

You have to first create, after use and to finish mount:

import { createApp } from 'vue'
import App from './App.vue'
import VueGapi from 'vue-gapi'

const app = createApp(App)

app.use(VueGapi, {
    apiKey: 'my_key',
    clientId: 'my_client_id',
    discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
    scope: 'https://www.googleapis.com/auth/spreadsheets',
})

app.mount('#app')

Also you have to be sure to use Vue 3 (check vue version in your package.json) and to use the corresponding vue-gapi package (https://www.npmjs.com/package/vue-gapi)