VuexFireでNuxt.jsアプリに一瞬でFirestoreを導入する ref: https://qiita.com/wataruoguchi/items/8fdda8e9754658be06be

file0.txt

<proj>
L src
  L plugins
  L components
  L package.json
  L ...
L functions
L public

file6.diff

<template>
  <div>
    <h1>firestore contents here</h1>
    <ul>
      <li v-for="(user, userIdx) in users" :key="userIdx">
        <ul>
          <li>name: {{ user.name }}</li>
          <li>email: {{ user.email }}</li>
        </ul>
      </li>
    </ul>
+    <div class="form">
+      <h1>I know, but this is the form!</h1>
+      <div>
+               Name: <input type="text" name="name" v-model="name">
+      </div>
+      <div>
+               email: <input type="text" name="email" v-model="email">
+      </div>
+      <div>
+        <button @click="submit">Submit</button>
+      </div>
+    </div>
  </div>
</template>

<script>
import { db } from '~/plugins/firebase.js'
import { mapGetters } from 'vuex'

export default {
  created: function () {
    this.$store.dispatch('setUsersRef', db.collection('users'))
  },
  computed: {
    ...mapGetters({ users: 'getUsers' })
  },
+  data: function () {
+    return {
+      name: '',
+      email: '',
+    }
+  },
+  methods: {
+    submit: function () {
+      const user = {
+        name: this.name,
+        email: this.email,
+      }
+      const usersRef = db.collection('users')
+      usersRef.add(user)
+      this.name = ''
+      this.email = ''
+    }
+  },
}
</script>

<style>
</style>

file6.txt

<template>
  <div>
    <h1>firestore contents here</h1>
    <ul>
      <li v-for="(user, userIdx) in users" :key="userIdx">
        <ul>
          <li>name: {{ user.name }}</li>
          <li>email: {{ user.email }}</li>
        </ul>
      </li>
    </ul>
+    <div class="form">
+      <h1>I know, but this is the form!</h1>
+      <div>
+               Name: <input type="text" name="name" v-model="name">
+      </div>
+      <div>
+               email: <input type="text" name="email" v-model="email">
+      </div>
+      <div>
+        <button @click="submit">Submit</button>
+      </div>
+    </div>
  </div>
</template>

<script>
import { db } from '~/plugins/firebase.js'
import { mapGetters } from 'vuex'

export default {
  created: function () {
    this.$store.dispatch('setUsersRef', db.collection('users'))
  },
  computed: {
    ...mapGetters({ users: 'getUsers' })
  },
+  data: function () {
+    return {
+      name: '',
+      email: '',
+    }
+  },
+  methods: {
+    submit: function () {
+      const user = {
+        name: this.name,
+        email: this.email,
+      }
+      const usersRef = db.collection('users')
+      usersRef.add(user)
+      this.name = ''
+      this.email = ''
+    }
+  },
}
</script>

<style>
</style>

firebase.js

import firebase from 'firebase'
import 'firebase/firestore'
const serviceAccount = require('~/../serviceAccountKey.json')

firebase.initializeApp({ ...serviceAccount })
const db = firebase.firestore()
const settings = { timestampsInSnapshots: true }
db.settings(settings)
export { db }

index.js

import Vuex from 'vuex'
import { firebaseMutations, firebaseAction } from 'vuexfire'

const createStore = () => {
  return new Vuex.Store({
    state: {
      users: [],
    },
    mutations: {
      ...firebaseMutations
    },
    actions: {
      setUsersRef: firebaseAction(({ bindFirebaseRef }, ref) => {
        bindFirebaseRef('users', ref)
      })
    },
    getters: {
      getUsers: (state) => {
        return state.users
      },
    },
  })
}

export default createStore

nuxt.config.js

module.exports = {
  ...
  plugins: ['~/plugins/firebase'],
  ...
}

serviceAccountKey.json

{
  "apiKey": "<API_KEY>",
  "authDomain": "<PROJECT_ID>.firebaseapp.com",
  "databaseURL": "https://<DATABASE_NAME>.firebaseio.com",
  "projectId": "<PROJECT_ID>",
  "storageBucket": "<BUCKET>.appspot.com",
  "messagingSenderId": "<SENDER_ID>"
}

users.vue

<template>
  <div>
    <h1>firestore contents here</h1>
    <ul>
      <li v-for="(user, userIdx) in users" :key="userIdx">
        <ul>
          <li>name: {{ user.name }}</li>
          <li>email: {{ user.email }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
import { db } from '~/plugins/firebase.js'
import { mapGetters } from 'vuex'

export default {
  created: function () {
    this.$store.dispatch('setUsersRef', db.collection('users'))
  },
  computed: {
    ...mapGetters({ users: 'getUsers' })
  },
}
</script>

<style>
</style>