설치

npm install vuefire firebase --save

import Vue from 'vue'
import VueFire from 'vuefire'
import firebase from 'firebase/app'
import 'firebase/firestore'

// vuefire 연동
Vue.use(VueFire)

// firebase 셋팅
var fbConfig = {
  apiKey: ...
};

let FBApp = firebase.initializeApp(fbConfig)
export const fbApp = FBApp

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

import Vue from 'vue'
import VueFire from 'vuefire'
import firebase from 'firebase/app'
import 'firebase/firestore'

// vuefire 연동
Vue.use(VueFire)

// firebase 셋팅
var fbConfig = {...};

let FBApp = firebase.initializeApp(fbConfig)
export const fbApp = FBApp

const database = FBApp.firestore()
const initLangRowData = {}

export const db = {
  language: {
    getRows: function () {
      return database.collection('collectionName')
        .orderBy('category')
        .orderBy('createdAt')
    },
    addRow: function (data) {
      const createdAt = new Date();
      data = data || this.initLangRowData;
      data.createdAt = createdAt;

      // add: id 자동 부여 추가
      // set: id 지정 추가
      database.collection('collectionName').add(data);
    },
    deleteRowById: function (id) {
      var result = confirm('삭제하시겠습니까?');
      if (result) {
        database.collection('collectionName').doc(id).delete();
      }
    },
    updateRowById: function (id, data) {
      database.collection('collectionName').doc(id).update(data)
        .then((result) => {
          alert('저장되었습니다.');
        });
    }
  }
}

<template>
  <table>
    <tr v-for="row in langList" :key="row.id">
      ...
    </tr>
  </table>
</template>

export default {
  name: "example",
  props: {},
  data() {
    return {
      langList: []
    }
  },
  methods:{
    addRow() {
      db.language.addRow(this.serviceId);
    },
    deleteRowById (id) {
      db.language.deleteRow(this.serviceId, id);
    },
    updateRowById (id, data) {
      db.language.updateRow(this.serviceId, id, data);
    },
    copyRow (data) {
      db.language.addRow(this.serviceId, data);
    }
  },
  firestore() {
    return {
      langList: db.language.getRows(this.serviceId)
    }
  }
}