Build a Twitter Clone With Adonis and Vue

Displaying User Followers

Create the UserFollowers component within the Profile folder and paste the code below into it:

// src/components/User/Profile/UserFollowers.vue

<template>
    <div>
        <UserProfileHeader
            :user="user"
            :auth-user="authUser"
        />
        <div class="ui stackable grid container">
            <div class="four wide column">
                <UserProfileSidebarDetails :user="user"/>
            </div>
            <div class="twelve wide column">
                <div class="ui segment">
                    <div class="ui three column grid">
                        <UserCard
                            v-for="follower in user.followers"
                            :key="follower.id"
                            :user="follower"
                        />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import UserProfileHeader from '@/components/User/Profile/UserProfileHeader'
    import UserProfileSidebarDetails from '@/components/User/Profile/UserProfileSidebarDetails'
    import UserCard from '@/components/User/Profile/UserCard'
    import profileMixin from '@/mixins/profileMixin'

    export default {
        name: 'UserFollowers',
        mixins: [profileMixin],
        components: {
            UserProfileHeader,
            UserCard,
            UserProfileSidebarDetails
        },
        data () {
            return {
                user: '',
                authUser: ''
            }
        }
    }
</script>

This is basically what we did in the UsersFollowing component. So, we won't be spending much time on it. It also uses the profileMixin mixin.

Adding User Followers Routes

Open src/router/index.js, and add the code below to it just above the users following routes:

// src/router/index.js

import UserFollowers from '@/components/User/Profile/UserFollowers'

// add these inside the `routes` array
{
    path: '/followers',
    component: UserFollowers
},
{
    path: '/:username/followers',
    component: UserFollowers,
    props: true
},

We should be able to see a particular user's followers now: