GoogleAPIをvue.jsで接続しようとするとjsonファイルを読み込めずエラーになる

Question

お世話になっております。

表題の通り、vue.jsのアプリケーションでGoogleAPIを利用しようとしているのですが、接続のため、JSONファイルを読み込もうとするとエラーになります
[使用したいAPI]
・Google transration

書きを実行すると
translateText()
を実行した時点でエラーメッセージが表記されます。

oooo.jsonの位置は色々と変更し、staticの下などにも持っていきましたが、必ず、エラーメッセージが出ます。ひょっとしたら、根本的に置く場所を間違っているかも知れません。
もし、何か少しでもおわかりになる方いらっしゃいましたらよろしくお願いします

ooo.vue

var Translator = require("./translator.js");
・
・
  mounted() {
    this.translate = new Translator.GoogleTranslate('./oooo.json');
  },
・
・
method:{
    funcA(){
        this.translate.translateText(message, "en")
    }
}

transrator.js

class GoogleTranslate {
  constructor(credential) {
    process.env.GOOGLE_APPLICATION_CREDENTIALS = credential
    const { Translate } = require('@google-cloud/translate').v2
    this.translate = new Translate()
  }
  translateText(message, target) {
    return new Promise((resolve, reject) => {
      this.translate.translate(text, target)
    })
  }
}

エラーメッセージ

ooooo.json does not exist, or it is not a file. fs.realpathSync is not a function

Answer 1

エラー以前の話としてVue.jsからは使えないのでは。
サーバーサイドのnode.jsとフロントのJSは別。

SSR中なら使えるかもしれないけどそんな使い方してるようには見えない。

フロントから使うことを想定してないAPIは基本的にはどうやっても使えない。