目的
Vue 3 と Firebaseを組み合わせて、簡単なリアルタイムチャットアプリを作成する方法を解説します。FirebaseのFirestoreとAuthenticationを活用して、ユーザー認証機能やリアルタイムデータの表示を実現します。
開発環境
Vue 3

Firebase (Firestore & Authentication)

Vuex（状態管理）

npm install firebase
Firebaseの設定を以下のように書きます。

import { createApp } from 'vue';
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = { /* Firebase config */ };
firebase.initializeApp(firebaseConfig);

const db = firebase.firestore();
const auth = firebase.auth();
2. チャット画面の作成
Vueのコンポーネントを作成し、Firestoreにメッセージを送信して表示します。

{{ message.text }}

まとめ
Vue 3とFirebaseを組み合わせることで、簡単にリアルタイムなチャットアプリを作成できます。FirebaseのFirestoreはリアルタイムデータの同期を簡単に実現するため、チャットアプリに最適です。