本稿について
本稿はサイト運営者が学んだことなどを記したメモの内容です。
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
全てが正確な情報とは限りません。ご注意ください。また修正するべき点は適時修正していきます
#vue
最近なにかとFirebaseを使うことが多くなった。
Nuxt.jsでfirebaseを使うときの初期化のメモ
firebaseのライブラリをインストールする
$ npm install --save firebase
自分は "plugins" を作成した
/plugins/firebase.js
import firebase from 'firebase'
firebase.initializeApp(
{
apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
authDomain: "hogehoge.firebaseapp.com",
databaseURL: "https://hogehoge.firebaseio.com",
projectId: "hogehoge",
storageBucket: "hogehoge.appspot.com",
messagingSenderId: "123456789",
appId: "1:123456789:web:XXXXXXXXXXXXXXXXXXXXXX",
measurementId: "AAAAAAAAAAAAAAAAAA"
}
)
firebase.analytics();
export default firebase
上記の設定はfirebaseのダッシュボードの以下の設定画面から確認できる
「アプリを追加」を押してweb用のアプリケーションを登録します。
webを選択してください
アプリ名を入力して「アプリを登録」ボタンを押下する
そうすると設定内容が表示します。
すでにアプリを作成済みの場合には「マイアプリ」から確認できる
上記の設定は各環境毎に環境変数としてもたせておいたほうが良さげ
「Firebase App named '[DEFAULT]' already exists」というエラーが出た場合
firebase.initializeApp が複数回呼ばれると発生するらしいので、apps.lengthでチェックを入れておいた方が良い
if (firebase.apps.length === 0) {
firebase.initializeApp()
}
[参考]