Build a Twitter Clone With Adonis and Vue

Tweets Component

In the last lesson, we created a Tweet component. In this lesson we are going to create a Tweets component which will be composed of the Tweet components. Within the Tweet folder, create Tweets.vue file. Paste the code below in the newly created file:

// src/components/Tweet/Tweets.vue

<template>
    <div class="ui feed">
        <Tweet
            v-for="tweet in tweets"
            :key="tweet.id"
            :tweet="tweet"
        />
    </div>
</template>

<script>
    import Tweet from '@/components/Tweet/Tweet'

    export default {
        name: 'Tweets',
        components: {
            Tweet
        },
        props: {
            tweets: {
                type: Array,
                required: true
            },
            authUser: {
                type: Object,
                required: true
            }
        }
    }
</script>

We import the Tweet component. It accepts an array of tweets and the authenticated user as props. The component simply render the Tweet component. Recall that the Tweet component accept a tweet as props. So, we loop through the array of tweets and pass each tweet to the Tweet component as props.