We already have a fully functional single-page application, but it still lacks some awesomeness. For example, it's not really beautiful that the time appears as a timestamp. Let's write the utility function that will transform our timestamp into something beautiful.

We will use the Moment.js library (https://momentjs.com/). Install it in the application folder:

npm install moment --save

Create a folder and call it utils. Add a file called utils.js to this folder. Import moment and write the following function:

//utils.js
import moment from 'moment'

function dateToString (date) {
  if (date) {
    return moment(date).format('MMMM Do YYYY, h:mm:ss a')
  }
  return''
}

Export it in the end of the file:

//utils.js
<...>
export { dateToString }

Let's import this function to App.vue and use it to format our timestamp. Open the App.vue file and add the import statement at the beginning of the script section:

//App.vue
<script>
  import Firebase from 'firebase'
  import { dateToString } from './utils/utils'
  <...>
</script>

In order to be able to use this function within the Vue template, we have to export it in the methods section. Just add a new entry to the methods object:

//App.vue
<script>
  export default {
    <...>
    methods: {
      dateToString: dateToString,
      <...>
    }
</script>

Since we use ES6, we can just write the following lines of code:

methods: {
  dateToString
}

Now, we can use this method inside the template section. Just wrap the message.timestamp binding object in the dataToString method:

<p class="card-text"><small class="text-muted">Added on {{ dateToString(message.timestamp) }}</small></p>

Check out the page! Now, you can see beautiful dates instead of Unix timestamps.

You probably noticed that the first message of the demo application is always there. It's not moved by other, fresh message items. So, it seems that it's kind of a special message, and it's treated in a special way. In fact, it is. If you want to make a card sticky, just add it before the card element that iterates through other messages. You can also add some class to this card to show that it's really special. In my case, I added Bootstrap's card-outline-success class that outlines the element in a nice green color:

//App.vue
<div class="card-columns">
  <div class="card card-outline-success">
    <div class="card-block">
      <h5 class="card-title">Hello!</h5>
      <p class="card-text">This is our fixed card!</p>
      <p class="card-text"><small class="text-muted">Added on {{ dateToString(Date.now()) }}</small></p>
    </div>
  </div>
  <div class="card" v-for="message in messages">
    <div class="card-block">
      <h5 class="card-title">{{ message.title }}</h5>
      <p class="card-text">{{ message.text }}</p>
      <p class="card-text"><small class="text-muted">Added on {{ dateToString(message.timestamp) }}</small></p>
    </div>
  </div>
</div>

Now, you have a nice sticky card with a color that differs from other cards' color. But… don't you see any problem? We have the very same code repeated twice in our template. I'm pretty sure that you are aware of the rule of thumb of any developer: DRY—don't repeat yourself!

Let's extract the card to an individual component. It's really easy. Add a component called Card.vue to the components folder. The code for this component is really simple:

//Card.vue
<template>
  <div class="card">
    <div class="card-block">
      <h5 class="card-title">{{ title }}</h5>
      <p class="card-text">{{ text }}</p>
      <p class="card-text"><small class="text-muted">{{ footer }}</small></p>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title', 'text', 'footer']
  }
</script>

Now, let's invoke this component from App.vue with different values for title, text, and footer. First of all, it should be imported and exported in the Vue components object:

//App.vue
<script>
<...>
  import Card from './components/Card'
  <...>
  export default {
  <...>
    components: {
      Card
    }
  }
</script>

Now, we can use the <card> element within our template. We need to bind title, text, and footer. Footer is actually the text that says Added on …. So, the markup for the first card will look like this:

//App.vue
<template>
  <div class="card-columns">
    <card class="card-outline-success":title="'Hello!'":text="'This is our fixed card!'":footer="'Added on ' + dateToString(Date.now())"></card>
  </div>
</div>
</template>

The list of other messages will follow the same logic. For each message from the messages array, we will bind the corresponding message's entries (title, text, and timestamp). So, the markup for the list of message cards will look like this:

<div class="card-columns">
<...>
  <card v-for="message in messages":title="message.title":text="message.text":footer="'Added on ' + dateToString(message.timestamp)"></card>
</div>
</div>

As you can see, we have replaced fourteen lines of code with only two lines! Of course, our component also contains some lines of code, but now, we can reuse it again and again.