I’m trying to use the VueGapi plugin for a gmail app in Vue. Here is my main.js
JavaScript
x
13
13
1
import { createApp } from 'vue'
2
import App from './App.vue'
3
import VueGapi from 'vue-gapi'
4
5
const app = createApp(App).mount('#app')
6
7
app.use(VueGapi, {
8
apiKey: 'my_key',
9
clientId: 'my_client_id',
10
discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
11
scope: 'https://www.googleapis.com/auth/spreadsheets',
12
})
13
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!
Advertisement
Answer
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
:
JavaScript
1
16
16
1
import { createApp } from 'vue'
2
import App from './App.vue'
3
import VueGapi from 'vue-gapi'
4
5
const app = createApp(App)
6
7
app.use(VueGapi, {
8
apiKey: 'my_key',
9
clientId: 'my_client_id',
10
discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
11
scope: 'https://www.googleapis.com/auth/spreadsheets',
12
})
13
14
app.mount('#app')
15
16
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)