How to make a plugin work on refresh? (Nuxt)

I am trying to use the vue GAPI plugin in a project.

It works fine when navigating between pages, but on refresh I get the error:

vue-gapi.common.js?15fd:241 Uncaught (in promise) Error: gapi not initialized at GoogleAuthService.isSignedIn (vue-gapi.common.js?15fd:241)

I think this is due to the way I am initialising the component in my project – namely through the /plugins folder. I think I am trying to use GAPI before it is loaded, but even when wrapping a call to GAPI in a promise, it immediately rejects with the above error. What would be the proper way to handle 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 has the following:

  plugins: [
    { src: "~plugins/gapi.js", ssr: false },
  ],

Any advice on how to get this working is very welcome.

Thanks

Answer

I solved this by wrapping the call to this.$isSignedIn() in a promise which makes a few attempts to resolve this.$isSignedIn() and on success sets a data prop on my component. This then acts as the trigger for other things to happen as the sign in is ‘complete’ at this point.

Could not find another way to do it without modifying the NPM.