tree -I "node_modules|test|assets|config|static|README.md|build" -L 3
.
├── index.html
├── package-lock.json
├── package.json
└── src
    ├── App.vue
    ├── components
    │   ├── HelloWorld.vue
    │   ├── Reptile.vue
    │   ├── Signin.vue
    │   ├── Signup.vue
    │   └── Todo.vue
    ├── main.js
    └── router
        └── index.js

main.js

全体

import Vue from 'vue'
import App from './App'
import router from './router'
import firebase from 'firebase'
import VueFirestore from 'vue-firestore'

Vue.config.productionTip = false

// Initialize Firebase
//Firebaseの値は置き換えましょう
var config = {
  apiKey: process.env.NODE_API_KEY,
  authDomain: process.env.NODE_AUTH_DOMAIN,
  databaseURL: process.env.NODE_DATABASE_URL,
  projectId: process.env.NODE_PROJECT_ID,
  storageBucket: process.env.NODE_STORAGE_BUCKET,
  messagingSenderId: process.env.NODE_MESSAGING_SENDER_ID
}
const firebaseApp = firebase.initializeApp(config)

const db = firebaseApp.firestore()
db.settings({timestampsInSnapshots: true})
Vue.use(VueFirestore)

export default db

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Firestoreの読み込み

Firestoreを読み込みます。db.settings({timestampsInSnapshots: true}) この設定はないといけないようです。

const db = firebaseApp.firestore()
db.settings({timestampsInSnapshots: true})
Vue.use(VueFirestore)

Reptile.vueのソースコード

<template>
  <div id="app">
    <div>
      <input type="text"
        v-model="newReptile"
        @keyup.enter="addReptile">
      <button  @click="addReptile">
        Add Reptile
      </button>
    </div>
    <ul class="reptileList">
      <li v-for="reptile in reptiles"  :key="reptile.id">
        {{ reptile.name }} -
        <button @click="deleteReptile(reptile)">
          Remove
        </button>
      </li>
    </ul>
  </div>
</template>

<script>
import db from '../main'

export default {
  name: 'app',
  data () {
    return {
      reptiles: [],
      newReptile: ''
    }
  },
  firestore () {
    return {
      reptiles: db.collection('reptiles')
    }
  },
  methods: {
    addReptile: function () {
      this.$firestore.reptiles.add(
        {
          name: this.newReptile,
          timestamp: new Date()
        }
      )
      this.newReptile = ''
    },
    deleteReptile: function (reptile) {
      this.$firestore.reptiles.doc(reptile['.key']).delete()
    }
  }
}
</script>

<style>
.reptileList {
  list-style: none;
}
</style>

firestore ()

Cloud Firestore上の、reptilesコレクションから値を持ってきています。Vue側のreptiles変数にいれて、表示しています。

  firestore () {
    return {
      reptiles: db.collection('reptiles')
    }
  },

methods/createTodo、methods/deleteTodo

この辺はあまり難しいことをしていないです。

  methods: {
    createTodo: function (newTodoName) {
      if (newTodoName === '') { return }
      this.todoRef.push({
        name: this.newTodoName
      })
      this.newTodoName = ''
    },
    deleteTodo: function (todo) {
      this.todoRef.child(todo).remove()
    }
  }