I am currently incorporating the vue GAPI plugin into my project.
While it functions smoothly when navigating between pages, I encounter an error upon refreshing:
vue-gapi.common.js?15fd:241 Uncaught (in promise) Error: gapi not initialized at GoogleAuthService.isSignedIn (vue-gapi.common.js?15fd:241)I suspect that the issue lies in how I am initializing the component within my project - specifically through the /plugins folder. It seems like I may be attempting to use GAPI before it has fully loaded, and even when trying to wrap a call to GAPI in a promise, it immediately rejects with the aforementioned error. What would be the correct approach to address this? Below is the code for my gapi plugin:
import Vue from "vue";
import VueGAPI from "vue-gapi";
const apiConfig = {
apiKey: "xxx",
clientId:
"xxx.apps.googleusercontent.com",
discoveryDocs: [
"https://content.googleapis.com/discovery/v1/apis/drive/v3/rest",
"https://content.googleapis.com/discovery/v1/apis/slides/v1/rest"
],
scope:
"https://www.googleapis.com/auth/drive.readonly https://www.googleapis.com/auth/presentations https://www.googleapis.com/auth/presentations.readonly",
refreshToken: true
};
Vue.use(VueGAPI, apiConfig);
nuxt.config.js contains the following:
plugins: [
{ src: "~plugins/gapi.js", ssr: false },
],
Any suggestions on how to resolve this issue are greatly appreciated.
Thank you