Vue.jsへのfirebaseの導入と基本的な使い方

ライブラリのインストール

yarn or npm のどちらか使用している方を実行しよう

yarn add firebase --save
npm install firebase --save

設定ファイルを設置

configフォルダを作成し、その中に以下のファイルを設置する

firebase-config.js

export const firebaseConfig = {
  apiKey: 'hoge',
  authDomain: 'hoge',
  databaseURL: 'hoge',
  projectId: 'hoge',
  storageBucket: 'hoge',
  messagingSenderId: 'hoge'
}

中身は以下のボタンを押したら表示されるのでコピペしよう

firebaseを使えるようにする

main.jsに以下の内容を追加する

main.js

import firebase from 'firebase'
import { firebaseConfig } from './../config/firebase-config'
firebase.initializeApp(firebaseConfig)

実際に使用する

firestoreのデータを取得・表示する

companiesというコレクションの全ドキュメントを参照する
参考（公式ドキュメント）：https://firebase.google.com/docs/firestore/query-data/get-data

import firebase from "firebase";
export default {
  created: function() {
    this.firestore = firebase.firestore();
    this.companies = this.firestore.collection("companies");

    this.companies
      .get()
      .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          // doc.data() is never undefined for query doc snapshots
          console.log(doc.id, " => ", doc.data());
        });
      })
      .catch(function(error) {
        console.log("Error getting documents: ", error);
      });
  }
};