Within the components, create a Tweet folder and create Tweet.vue file in it. Paste the code below in the newly created file:

// src/components/Tweet/Tweet.vue

    <div class="event">
        <div class="label">
            <img src="https://www.gravatar.com/avatar/default?s=200&r=pg&d=mm">
        <div class="content">
            <div class="summary">
                <router-link :to="`/${tweet.user.username}`">
                    {{ tweet.user.name }}
                    <small>{{ `@${tweet.user.username}` }}</small>
                <div class="date">
                    {{ tweet.created_at | timeAgo }}
            <router-link :to="`/${tweet.user.username}/status/${tweet.id}`">
                <div class="extra text">
                    {{ tweet.tweet }}

    export default {
        name: 'Tweet',
        props: {
            tweet: {
                type: Object,
                required: true
            authUser: {
                type: Object,
                required: true,

This component accepts the tweet to be displayed and the authenticated user as props. We display the avatar (we'll be using image placeholder for the purpose of this course), the username linked to the user profile of the user that posted the tweet and when the tweet was posted. Lastly, we display the tweet itself with a link to view the tweet. Notice we are filtering when the tweet was posted by using a timeAgo filter which we'll create shortly.

Create Date Filters

In addition to creating the timeAgo filter above, we'll also create two more date filters. To help us with manipulating date and time, we'll be using Moment.js.

Table of Contents

    Let's install moment.js:

    npm install moment --save

    Next, open src/main.js and add the code below in it:

    // src/main.js
    import moment from 'moment'
    // add these before Vue instantiation
    // Global filter to format dates with momentjs
    Vue.filter('timeAgo', date => moment(date).fromNow())
    Vue.filter('joined', date => moment(date).format('MMMM YYYY'))
    Vue.filter('dob', date => moment(date).format('MMMM Do YYYY'))

    These simply uses moment.js to format the supplied dates to specific formats.

    Chimezie Enyinnaya

    16 posts

    Software Developer [PHP Laravel JavaScript NodeJS AdonisJS VueJS] | movie lover | run http://openlaravel.com