VueでFirebase Cloud Firestoreを使う方法

2021年7月現在で、firestoreに接続するのに少しはまったので、備忘録として残しておきます。

環境

• vue@2.6.14
• firebase@8.6.8

事前準備

vueのプロジェクトを作成する部分は、おおむね割愛しますが、vue create <プロジェクト名> で作成しています。

> vue create example

firebaseのクライアントライブラリ(Web用)を入れる

> yarn add firebase --save

ブラウザ　Firebase コンソールにアクセスして、プロジェクトの作成、ローカルのプロジェクトの紐づけをする

Cloud Firestoreでコレクションを作成する

Firestoreを使う方法

基本的には、Web バージョン8用の本家ドキュメントを参照して行った。

firebaseのインポートも /appを付けるようになっている。

import firebase from 'firebase/app';

firestoreを使うためには、firebase/firestoreをrequireする必要がある。

require('firebase/firestore');

さんぷる (./components/Sample.vue)

<template>
  <div>
    <ul>
      <li v-for="(post, i) in posts" :key="i">{{ post.content }}</li>
    </ul>
  </div>
</template>

<script>
import firebase from "firebase/app";
require("firebase/firestore");

export default {
  name: "Sample",
  data: () => ({
    db: {},
    posts: [],
  }),
  created() {
    this.db = firebase.firestore();
  },
  mounted() {
    this.getPosts();
  },
  methods: {
     async getPosts() {
       const querySnapshot = this.db.collection('コレクション名').get()
       querySnapshot.forEach(post => {
         const data = post.data()
         data.id = post.id;
         this.posts.push(data);
       });
     }
  }
   
}
</script>

こんな感じで使えると思います。