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

    <div class="ui feed">
            v-for="tweet in tweets"

    import Tweet from '@/components/Tweet/Tweet'

    export default {
        name: 'Tweets',
        components: {
        props: {
            tweets: {
                type: Array,
                required: true
            authUser: {
                type: Object,
                required: true

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.

Like this article? Follow @ammezie on Twitter