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:

Table of Contents

    // 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:

    Chimezie Enyinnaya

    19 posts

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