VueCliでFirestoreにある値を表示したい。

Question

vuecliでWebサービスを作ってます。Firestoreに登録されているデータを以下のようにして取得しようとしましたが、表示されませんでした。
エラーは特に出ませんでした。
参考

main.js

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'

import { firestorePlugin } from 'vuefire'
import firebase from 'firebase' 
import 'firebase/firestore'

Vue.use(firestorePlugin)
Vue.use(Buefy)
var firebaseConfig = {
  apiKey: 
  authDomain: 
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
  measurementId: 
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

export const db = firebase.firestore()
export const auth = firebase.auth()

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Home.vue

<template>
  <div class="home">
   <b-message>
  　<li v-for="post in posts" :key="post.id">
    
    <div class="top_title">
       <h2>{{ post.title }}</h2>
    </div>
    <div class="top_content">
      <p>{{ post.content }}</p>
     </div>
    <div class="top_createAt">
      <p>{{ post.createdAt }}</p>
    </div>
    </li>
    </b-message>
    
  </div>

</template>

<script>
import { db } from '@/main'

export default {
  name: 'Home',
  data() {
    return {
      posts: []
    }
  },
   firestore() {
    return {
      posts: db.collection('posts')
    }
  }
}
</script>

vue/cli-service　4.4.0
firebase 7.14.6

Comments

[gentaro]

一応読んでおいた方が良いんじゃないでしょうか。
https://qiita.com/hoshymo/items/e9c14ed157200b36eaa5#firestore

基本的にはapikeyなどと名の付くものは安易に晒さない癖を付けておいた方が良いです。

あとVue-cliのcilはCommand Line Interfaceの略で、要するにコマンドライン用のツールであるという事から来ている名称だと思うんで、なんかタイトルの表現に違和感があります。

https://cli.vuejs.org/guide/#cli
> The CLI (@vue/cli) is a globally installed npm package and provides the vue command in your terminal.

[Tikka123456]

返信ありがとうございます。
注意喚起ありがとうございます、うっかりしていました。