Nuxt.js で Firebase と Cloud Firestore を使えるように初期設定を行う

Nuxt.js で楽しい Firebase ライフを送るために、Cloud Firestore を使えるよう初期設定を行う。

Firebase の設定

• firebase のインストール
  • $ yarn add firebase
• dotenv のインストール
  • 参考) https://chatboxinc.wordpress.com/2018/03/26/nuxt_js_with_dotenv/
• .env.templete の追加

ApiKey=
AuthDomain=
DatabaseURL=
ProjectId=
StorageBucket=
MessagingSenderId=

• .env.template を .env にコピーして firebase の設定を埋める(バージョン管理には含めない)

Firebase のプラグインを追加

• plugins/firebase.js の追加

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import 'firebase/storage'

var config = {
  apiKey: process.env.ApiKey,
  authDomain: process.env.AuthDomain,
  databaseURL: process.env.DatabaseURL,
  projectId: process.env.ProjectId,
  storageBucket: process.env.StorageBucket,
  messagingSenderId: process.env.MessagingSenderId
}

if (!firebase.apps.length) {
  firebase.initializeApp(config)
}

const db = firebase.firestore()
const settings = {}
db.settings(settings)

export default firebase

• 上記では auth firestore storage を読み込んでいるが、使いたい機能に応じて任意に必要なライブラリを読み込む

プロダクトコードにプラグインを読み込む

上記設定完了後は、プロダクトコードの任意の場所で以下のようにプラグインを読み込み firebase を利用する。

import firebase from '@/plugins/firebase'

さて、これでようやく楽しい Firebase ライフを始めることができる！