【初心者向け】【FirestoreとHosting編】Vuetify3（Vue.js3）とFirebaseを使って掲示板アプリをつくってみました。

<template>
  <v-app>
    <v-main>
      <!-- <HelloWorld /> -->
      <FrontEnd/>
    </v-main>
  </v-app>
</template>

<script setup>
  // import HelloWorld from '@/components/HelloWorld.vue'
  import FrontEnd from '@/components/FrontEnd.vue'
</script>

apiKey: と projectId: は”それぞれ人によって違う“,ので変更してください。（後述）

<template>
    <v-app id="inspire"> 
      <v-app-bar
        class="mt-4"
        max-height="50"
        color="deep-purple"
        dark
        absolute
      >
        <v-app-bar-nav-icon @click="drawer = true"></v-app-bar-nav-icon>
          <v-toolbar-title>Firestore+Vuetifyで作った掲示板</v-toolbar-title>
      </v-app-bar>
  
      <v-navigation-drawer
        v-model="drawer"
        absolute
        temporary
      >
        <v-list
          nav
          dense
        >
          <v-list-item-group
            active-class="deep-purple--text text--accent-4"
          >
            <v-list-item href="https://kikuichige.com" target="_blank">
                <v-list-item-icon>
                    <v-icon>mdi-home</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>イチゲブログ</v-list-item-title>
            </v-list-item>
  
            <v-list-item href="https://vuetifyjs.com/ja/" target="_blank">
                <v-list-item-icon>
                    <v-icon>mdi-home</v-icon>
                    </v-list-item-icon>
                    <v-list-item-title>Vuetify</v-list-item-title>
            </v-list-item>
          </v-list-item-group>
        </v-list>
  
      </v-navigation-drawer>
      <v-main class="grey lighten-2">
        <v-container>
          <v-row>
            <v-col class="mt-2" cols="12">
              <v-sheet height="230" color="orange lighten-2" class="mt-2 mx-auto" max-width="400">
                  <v-text-field
                    v-model="new_article_heading"
                    label="名前を入力してください"
                    filled>
                  </v-text-field>
                  <v-text-field
                    v-model="new_article_body"
                    label="メッセージを入力してください"
                    filled>
                  </v-text-field>
                  <v-btn color="success" dark v-on:click="createNewUser">投稿</v-btn>
              </v-sheet>
            </v-col>
  
            <template v-for="(article, index) in articles" :key="index">
              <v-col
                
                class="mt-2"
                cols="12"
              >
                <v-card
                    class="mt-2 mx-auto"
                    max-width="400"
                    color="lime lighten-5"
                >
                    <v-card-text class="text--primary">
                      <div><br>ID: {{ article.article_id}}<br>投稿日時: {{ article.pub_date}}<br>名前: {{ article.article_heading}}<br>{{ article.article_body}}</div>
                    </v-card-text>
                    <v-card-actions>
                        <v-btn color="success" dark v-on:click="DeletedArc(article.article_id)">削除</v-btn>
                    </v-card-actions>
                </v-card>
              </v-col>
            </template>
          </v-row>
        </v-container>
      </v-main>
      <!-- フッター -->
      <v-footer padless>
          <v-col
            class="text-center"
            cols="12"
          >
            <p>Copyright (c) 2023 イチゲブログ</p><v-btn href="https://opensource.org/licenses/mit-license.php">Released under the MIT license</v-btn>
          </v-col>
      </v-footer>
      <!-- フッターend -->
    </v-app>
  </template>
    
  <script>
  // 「Cloud Firestore を初期化する」コピーしたものbegin
    import { initializeApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
  
      const firebaseConfig = {
          apiKey: "それぞれ人によって違う",
          projectId: "それぞれ人によって違う",
      };
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      // Initialize Cloud Firestore and get a reference to the service
      const db = getFirestore(app);
  //「 Cloud Firestore を初期化する」をコピーしたものend
  // 使用する関数（firebaseが用意している）をここに追加する
    import { collection, getDocs,addDoc,doc, deleteDoc} from "firebase/firestore"
  
      export default {
        data() { 
            return{
                drawer: null,
                articles: [],
                new_article_heading:'',
                new_article_body:'',
                del_article_id:'',
            };
        },
        created(){
            this.getArticles();
        },
        methods: {
          // firestoreからデータ取得
            async getArticles() {
              this.articles=[];
              const querySnapshot = await getDocs(collection(db, "users"));
              querySnapshot.forEach((doc) => {
                let article_buf=doc.data();
                article_buf["article_id"]=doc.id
                console.log("article_buf => ", article_buf);
                this.articles.push(article_buf)
              });
            // 日付順にソート
              this.articles.sort((a, b) => new Date(a.pub_date) - new Date(b.pub_date)).reverse();
            },
            // firestoreにデータ書き込み
            async createNewUser(){
              var date = new Date();
              try {
                const docRef = await addDoc(collection(db, "users"), {
                  "article_heading": this.new_article_heading,
                  "article_body": this.new_article_body,
                  "pub_date":date.toLocaleString(),
                });
                console.log("Document written with ID: ", docRef.id);
                this.new_article_heading='';
                this.new_article_body='';
              } catch (e) {
                console.error("Error adding document: ", e);
              }
              this.getArticles();
            },
            // firestoreのデータ1件削除
            async DeletedArc(delId){
              console.log("delid=>",delId);
              await deleteDoc(doc(db, "users", delId));
              this.getArticles();
            },
          },
      }
    </script>