Vue + Vuex + Firebase serverless realtime chat

Question

I am "discovering" Firebase and I'm trying create simple chat with Vue, Vuex and Firebase. But because I'm just starting out with Vue, I need code review or advices from more experienced programmers. I need to know whether this code is properly structured - if it is well written in "Vue way" - and how to make my components better - more universal / better separated from rest of the code.

jsFiddle

var uid = null

var firebaseConfig = {
  apiKey: "AIzaSyDGYiab8xoIXIgbFSmLSwXubNL2T3Rr6AQ",
  authDomain: "first-steps-6abb2.firebaseapp.com",
  databaseURL: "https://first-steps-6abb2.firebaseio.com"
}

var store = new Vuex.Store({
  state: {
    messages: []
  },
  mutations: {
    addMessage (state, message) {
      state.messages.push(message)
      if (state.messages.length > 10) {
        state.messages.shift()
      }
    }
  }
})

var listMessages = {
  template: `
    <ul class="list-messages">
      <li v-for="message in messages">
        <span>{{message.time}}</span> {{ message.text }}
      </li>
    </ul>
  `,
  data () {
    return {
      messages: this.$store.state.messages
    }
  }
}

var addMessage = {
  template: `
    <div class="add-message">
      <label for="message">Add new:</label>
      <input id="message" @keyup.enter v-model="message">
      <button @click="sendMsg">Send</button>
    </div>
  `,
  data () {
    return {
      message: ''
    }
  },
  methods: {
    sendMsg () {
      messages.push().set({
        uid: uid,
        content: this.message,
        timestamp: firebase.database.ServerValue.TIMESTAMP
      })
      this.message = ''
    }
  }
}

firebase.initializeApp(firebaseConfig)
firebase.auth().signInAnonymously()
firebase.auth().onAuthStateChanged(function (user) {
  if (user) { uid = user.uid }
})

new Vue({
  el: '#app',
  store,
  components: {
    listMessages,
    addMessage
  }
})

var db = firebase.database()
var messages = db.ref('messages')
var query = messages.orderByChild('timestamp').limitToLast(10)

query.on('child_added', function (data) {
  store.commit('addMessage', {
    uid: data.val().uid,
    text: data.val().content,
    time: moment(data.val().timestamp).format('hh:mm:ss')
  })
})

html, body {
  margin: 0;
  height: 100%;
}
.container {
  min-height: 100%;
  position: relative;
}
.list-messages {
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  top: 10px;
  margin: 0;
  padding: 10px;
  list-style: none;
}
.list-messages span {
  color: lightblue;
}
.add-message {
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 10px;
}

<div id="app" class="container">
  <list-messages></list-messages>
  <add-message></add-message>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.3.1/vuex.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase-database.js"></script>

Answer 1

The code looks pretty straight-forward and I don't spot any obvious simplifications. I would suggest that you add error handling - especially for the case when uid is not null and remains that way. Perhaps an error message should be added if the request for the appropriate value fails.

---

Since ecmascript-6 is used (e.g. with the template literals) const could be used instead of var for any variable that doesn't get re-assigned (e.g. the components, db, etc.) and let for other variables (e.g. uid).

---

You could also consider providing a key attribute on the v-for where the messages are displayed, but the markup is quite simple for those so it may not add any benefit.

It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.¹

¹_{https://v2.vuejs.org/v2/guide/list.html#key}