Build a Twitter Clone With Adonis and Vue

Tweet Component

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

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

<script>
    export default {
        name: 'Tweet',
        props: {
            tweet: {
                type: Object,
                required: true
            },
            authUser: {
                type: Object,
                required: true,
            }
        }
    }
</script>

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.

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.