Technology Stack used: Vue3, Firebase and Tailwind CSS
- Define
firebaseConfig
and configure the API key in thefirebase/config.js
file
const firebaseConfig = {
apiKey: import.meta.env.VITE_API_KEY, // your api key
authDomain: "vue-app-db753.firebaseapp.com",
projectId: "vue-app-db753",
storageBucket: "vue-app-db753.firebasestorage.app",
messagingSenderId: "216666859258",
appId: "1:216666859258:web:d8a71442ea367839a3cb43"
}
export default firebaseConfig
- Sending messages to Realtime Firebase using the push method
import { getDatabase, push, ref as firebaseRef } from 'firebase/database'
const db = getDatabase()
push(firebaseRef(db, 'chats'), {
message: 'hello world',
timestamp: '12:42'
})
- Reading messages from Realtime Firebase
import { onMounted } from 'vue'
import { getDatabase, onValue, query, orderByKey, remove, ref as firebaseRef } from 'firebase/database'
const readMessage = () => {
const db = getDatabase()
const sortedQuery = query(firebaseRef(db, 'chats'), orderByKey())
onValue(sortedQuery, (snapshot) => {
const temp = []
snapshot.forEach((childSnapshot) => {
temp.push({ id: childSnapshot.key, ...childSnapshot.val() })
})
messages.value = temp
})
}
onMounted(() => {
readMessage()
})
- Removing messages from Realtime Firebase using the remove method
import { getDatabase, remove, ref as firebaseRef } from 'firebase/database'
const removeMessage = () => {
const db = getDatabase()
remove(firebaseRef(db, 'chats'))
}
git clone https://github.com/roma-marshall/chat-me.git
cd chat-me
npm run dev
MIT License