Vue.jsでGoogleドライブAPIを使う方法

GoogleドライブAPIとVue.jsを利用したWebアプリを作りたく、こちらのドキュメントを見ていました。
APIキーやクライアントIDの作成はおわったので、Googleドライブを読み込みたいのですが、
Vue.jsのソースに落とし込むことがうまくできません。

「Vue Google drive API」など検索しても、それっぽいモジュールがでてこず、
こちらを参考にscriptjsというモジュールを利用してみようと思いましたが、
GoogleMAP APIでやっていることをGoogleDrive APIに流用する方法がわからず、

vue-gapiというものを試してみましたが、
Failed to initialize gapi: undefined (status=undefined, code=undefined)
とエラーが表示されてしまい、どうしたらよいのかわかりません。
（メソッドは下記のようなかんじで実行しました）

vue
1//…
2  methods: {
3    login () {
4      this.$gapi.getGapiClient()
5        .then(gapi => {
6          gapi.login();
7        })
8    },
9//…

上記のvue-gapiを使うやり方でも、その他のやり方でも結構ですので、
VueでGoogleドライブのファイルを読み書きする方法をご存知の方がいらっしゃいましたら、教えてください。

ku__ra__ge

2020/05/27 01:37

クイックスタートに従ってjavascriptでGoogleドライブの内容を取得することはできていますか？できているなら取得結果であるjavascriptの変数をvue.jsで表示すればいいと思いますが、javascriptの変数をvue.jsで表示する方法は確認しましたか？（https://jp.vuejs.org/v2/guide/index.html）