VueJs and Firebase together is incredibly simple.

Building a Chat App; With VueJs + Firebase

The Essentials

Initialize Vue

vue create firebase-chat
cd firebase-chat
npm run serve

Create a Firebase Project.

// Initialize Firebase
var config = {
apiKey: "{your api key}",
authDomain: "your-project.firebaseapp.com",
databaseURL: "https://your-project.firebaseio.com",
projectId: "your-project",
storageBucket: "another-project-418b4.appspot.com",
messagingSenderId: "{your message sender id}"
};
firebase.initializeApp(config);

Connect Firebase to Your App

npm install firebase
// src/fire.jsimport firebase from 'firebase'var config = {
apiKey: "{your api key}",
authDomain: "your-project.firebaseapp.com",
databaseURL: "your-project.firebaseio.com",
projectId: "your-project",
storageBucket: "your-project.appspot.com",
messagingSenderId: "{your message sender id}"
};
var fire = firebase.initializeApp(config);
export default fire;

Building the App

<template><div id="app"></div></template><script>export default {
name: 'app',
data() {
return {
username: '',
messages: []
}
},
methods: {

},
mounted(){
},}</script>
<template>
<div>
<div v-if="!username">
You can't chat without a name. What's your name? <br />
<input type="text" placeholder="Name"
v-on:keyup.enter="updateUsername">
</div>
<div v-else>
From : {{username}}<br />
Message:<br />
<textarea name="" id="" cols="30" rows="10" placeholder="New Message"></textarea>
</div>
</div>
</template>
data() {
return {
username: '',
messages: []
}
},
methods: {
updateUsername(e) {
e.preventDefault();
if(e.target.value){
this.username = e.target.value;
}
},
methods: {
updateUsername(e) {
e.preventDefault();
if(e.target.value){
this.username = e.target.value;
},
sendMessage(e) {
e.preventDefault();
if(e.target.value){
const message = {
username: this.username,
text: e.target.value
}
// To-Do: Push message to firebase e.target.value = ''
}
}
}
<textarea name="" id="" cols="30" rows="10" placeholder="New Message" v-on:keyup.enter="sendMessage"></textarea>

Adding Firebase to the App

mounted(){
let vm = this;
const itemsRef = fire.database().ref('messages');
itemsRef.on('value', snapshot => {
let data = snapshot.val();
let messages = [];
Object.keys(data).forEach(key => {
messages.push({
id: key,
username: data[key].username,
text: data[key].text
});
});
vm.messages = messages;
});
}
...
sendMessage(e) {
e.preventDefault();
if(e.target.value){
const message = {
username: this.username,
text: e.target.value
}
//Push message to firebase reference
fire.database().ref('messages').push(message);
e.target.value = ''
}
}
//... template
<hr>
<div class="messages">
<h3>Messages</h3>
<div class="message" v-for="message in messages">
<strong>{{message.username}}</strong>
<p>{{message.text}}</p>
</div>
</div>

If you liked this article, you’re going to LOVE my latest project. I’m building MySpace from scratch using Node + Nuxt. Follow along as I document the journey!

Programmer — Writer. @andyhartnett12

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store